:root { --ui-bg:#f8fafc; --pane-bg:#fff; --accent:#2563eb; --text:#0f172a; --muted:#64748b; --border:#e2e8f0; --row-alt:#f9fbff; --row-hover:#eef2ff; --sticky-bg:#fff; }
html,body{height:100%}
body{margin:0;height:100%;overflow:hidden;background:var(--ui-bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
#splitSheet{height:100%;display:flex;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
#splitSheet[data-orient=vertical]{flex-direction:row}
#splitSheet[data-orient=horizontal]{flex-direction:column}
#ss-left,#ss-right{background:var(--pane-bg);display:flex;flex-direction:column}
#ss-left{flex:1 1 50%;min-width:30%;border-right:1px solid var(--border)}
#ss-right{flex:1 1 50%;min-width:30%}
#splitSheet[data-orient=horizontal] #ss-left{min-height:40%;min-width:auto;border-right:none;border-bottom:1px solid var(--border)}
#splitSheet[data-orient=horizontal] #ss-right{min-height:60%;min-width:auto}
.ss-header{padding:8px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;background:var(--pane-bg)}
.ss-scroll{flex:1;overflow:auto;padding:8px}
#ss-textarea{width:100%;min-height:120px;height:calc(100% - 4px);resize:none;border:1px solid var(--border);border-radius:8px;padding:8px;background:#fff;outline:none;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.textview{width:calc(95% - 4px);;height:calc(98% - 4px);overflow:auto;border:1px solid var(--border);border-radius:8px;padding:8px;background:#fff}
.textview mark{background:#fff3b0;color:inherit;padding:0 2px;border-radius:3px}
.btn{appearance:none;border:1px solid var(--border);background:#fff;color:var(--text);padding:4px 8px;border-radius:8px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.btn:hover{box-shadow:0 2px 8px rgba(2,6,23,.06)}
.btn.primary{border-color:transparent;background:var(--accent);color:#fff}
.btn .icon-wrap{display:inline-block;width:1.1em;text-align:center}
.btn .btn-text{display:inline-block}
@media (max-width:900px){.btn .btn-text{display:none}}
#ss-resizer{background:var(--accent);opacity:.9}
#splitSheet[data-orient=vertical] #ss-resizer{width:8px;cursor:col-resize}
#splitSheet[data-orient=horizontal] #ss-resizer{height:8px;cursor:row-resize}
#ss-resizer{flex:0 0 auto}
.ss-table-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ss-table-head{border-bottom:1px solid var(--border);background:var(--sticky-bg);position:sticky;top:0;z-index:3}
.ss-table-scroll{overflow:auto;overflow-x:auto;flex:1}
.ss-grid{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%}
.ss-grid th,.ss-grid td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0px 8px;vertical-align:middle;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-grid th:first-child,.ss-grid td:first-child{border-left:1px solid var(--border)}
.ss-grid thead th{position:sticky;top:0;background:var(--sticky-bg);z-index:2;font-weight:700;color:var(--muted);user-select:none}
.ss-grid tbody tr:nth-child(even) td{background:var(--row-alt)}
.ss-grid tbody tr:hover td{background:var(--row-hover)}
.cell{outline:none}
.cell:focus{box-shadow:inset 0 0 0 2px rgba(37,99,235,.35);background:#fff!important}
.ss-grid th{position:relative}
.col-resizer{position:absolute;right:-3px;top:0;width:6px;height:100%;cursor:col-resize;z-index:4}
.col-drag{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:8px;height:16px;cursor:grab;opacity:.45}
.col-drag:active{cursor:grabbing}
.th-inner{padding-left:18px}
.th-rownum{position:sticky;left:0;z-index:3;background:var(--sticky-bg)}
.td-rownum{position:sticky;left:0;z-index:1;background:#f7faff;font-weight:600;color:#334155}
.fab{position:fixed;right:12px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid var(--border);background:#fff;box-shadow:0 6px 24px rgba(15,23,42,.12);display:grid;place-items:center;cursor:pointer}
.fab:hover{box-shadow:0 10px 28px rgba(15,23,42,.18)}
.fab svg{width:18px;height:18px;fill:var(--accent)}

.switch input {
    opacity: 0; /* Makes the original checkbox invisible */
    width: 0;
    height: 0;
  }
  .switch {
    position: relative;
    display: inline-block;
    width: 48px; /* Desired width of the switch */
    height: 28px; /* Desired height of the switch */
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Background color when off */
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px; /* Creates a rounded "track" */
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Slightly smaller than container height */
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%; /* Creates a circular "thumb" */
  }
  input:checked + .slider {
    background-color: #2196F3; /* Background color when on */
  }
  input:checked + .slider:before {
    -webkit-transform: translateX(20px); /* Moves the thumb to the right */
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  .compact-text {
    font-stretch: ultra-condensed; /* or ultra-condensed, extra-condensed, semi-condensed, etc. */
    font-size: 0.6em; /* Adjust size as needed */
    max-width: min-content;
}