
*{box-sizing:border-box}
.sm-root{
   --sm-row-head-width:48px;
   --sm-col-width:110px;
   color:#202124;
   font:13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial;
   border:1px solid #e0e0e0;
   border-radius:12px;
   background:#fff;
   box-shadow:0 4px 18px rgba(0,0,0,.07);
   overflow:visible;
   position:relative;
}
.sm-formula{
   display:flex;
   align-items:center;
   gap:8px;
   padding:8px 10px;
   border-bottom:1px solid #e0e0e0;
   background:#fff;
}
.sm-cell-ref{
   flex:0 0 auto;
   min-width:56px;
   text-align:center;
   font-weight:700;
   padding:6px 8px;
   border:1px solid #e0e0e0;
   border-radius:8px;
   background:#f8f9fa;
}
.sm-fx{
   flex:0 0 auto;
   font-style:italic;
   color:#6b7280;
   font-weight:600;
}
.sm-formula-display{
   flex:1 1 auto;
   min-width:0;
   border:1px solid #e0e0e0;
   border-radius:8px;
   padding:8px 10px;
   font:13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   background:#fafafa;
   color:#334155;
   overflow-x:auto;
   overflow-y:hidden;
   -webkit-overflow-scrolling:touch;
   min-height:32px;
   white-space:nowrap;
}
.sm-formula-display > span{
   display:inline-block;
   white-space:pre;
}
.sm-grid-wrap{
   width:100%;
   max-height:50vh;
   overflow:auto;
   -webkit-overflow-scrolling:touch;
   border-bottom:1px solid #e0e0e0;
}
.sm-grid{
   border-collapse:collapse;
   table-layout:fixed !important;
   width:calc(var(--sm-row-head-width) + (var(--sm-col-width) * var(--sm-col-count)));
   min-width:calc(var(--sm-row-head-width) + (var(--sm-col-width) * var(--sm-col-count)));
   max-width:calc(var(--sm-row-head-width) + (var(--sm-col-width) * var(--sm-col-count)));
}
.sm-grid th,.sm-grid td{
   border-right:1px solid #e0e0e0;
   border-bottom:1px solid #e0e0e0;
   padding:0;
   height:28px;
}
.sm-root th:first-child,.sm-root td:first-child {
   position: sticky;
   left: 0;
   z-index: 9;
}

.sm-root tr:first-child>th:first-child{
   z-index: 11;
}

.sm-grid thead th{
   position:sticky;
   top:0;
   z-index:10;
}
.sm-grid th{
   background:#f8f9fa;
   color:#5f6368;
   font-weight:700;
   text-align:center;
   width:var(--sm-col-width);
   min-width:var(--sm-col-width);
   max-width:var(--sm-col-width);
}
.sm-grid tbody th,.sm-grid thead th:first-child{
   width:var(--sm-row-head-width);
   min-width:var(--sm-row-head-width);
   max-width:var(--sm-row-head-width);
}
.sm-grid td{
   width:var(--sm-col-width);
   min-width:var(--sm-col-width);
   max-width:var(--sm-col-width);
   position:relative;
   background:#fff;
   cursor:pointer;
   padding:4px 8px;
   white-space:nowrap;
   overflow:hidden;
   scroll-margin-top:29px;
   scroll-margin-left:var(--sm-row-head-width);
}
.sm-grid tbody td.sm-spread:not(.sm-has-comment){
   overflow:visible;
   z-index:1;
   clip-path:inset(0 var(--sm-span-clip-right) 0 0);
}

.sm-grid tbody td[checked]{
   outline:2px solid #0B57D0;
   outline-offset:-2px;
   z-index:2;
}

.sm-grid tbody td.sm-has-comment{
   padding:0;
   overflow:visible;
   z-index:3;
}

.sm-grid tbody td.sm-has-comment:hover,.sm-grid tbody td.sm-has-comment:focus-visible{
   z-index:5;
}
.sm-grid tbody td.sm-has-comment > span{
   display:block;
   padding:4px 8px;
   white-space:nowrap;
   overflow:hidden;
   height:100%;
}
.sm-grid tbody td.sm-has-comment.sm-spread > span{
   width:var(--sm-span-width);
   max-width:var(--sm-span-width);
}
.sm-has-comment::after{
   content:'';
   position:absolute;
   top:0;
   right:0;
   width:0;
   height:0;
   border-top:9px solid #fbbc04;
   border-left:9px solid transparent;
   pointer-events:none;
   z-index:4;
}
.sm-has-comment::before{
   content:attr(data-comment);
   position:absolute;
   top:calc(100% + 6px);
   left:0;
   z-index:1500;
   min-width:180px;
   max-width:320px;
   padding:8px 10px;
   border:1px solid #e6cc6b;
   border-radius:8px;
   background:#fff8cc;
   color:#3c4043;
   box-shadow:0 6px 14px rgba(0,0,0,.14);
   white-space:normal;
   line-height:1.3;
   opacity:0;
   transform:translateY(4px);
   white-space: pre-wrap;
   transition:opacity .12s ease, transform .12s ease;
   pointer-events:none;
}
.sm-has-comment:hover::before,.sm-has-comment:focus-visible::before{
   opacity:1;
   transform:translateY(0);
}
.sm-tabs{
   display:flex;
   gap:6px;
   align-items:center;
   padding:8px 10px;
   background:#fff;
   overflow-x:auto;
   overflow-y:visible;
   -webkit-overflow-scrolling:touch;
}
.sm-tab{
   border:1px solid #d1d5db;
   border-radius:8px;
   padding:6px 10px;
   cursor:pointer;
   white-space:nowrap;
   background:#fff;
   color:#374151;
   display:inline-flex;
   align-items:center;
}
.sm-tab > span{
   max-width:140px;
   overflow:hidden;
   text-overflow:ellipsis;
}
.tab-list-input:checked+.sm-tab{
   border-color:#0B57D0;
   color:#0B57D0;
   background:#eff6ff;
   font-weight:700;
}

.tab-list-input:focus-visible+.sm-tab{
   outline:2px solid #0B57D0;
   outline-offset:2px;
}

.tab-list-input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}

.sm-token-string{color:#498000}
.sm-token-number{color:#7550b8}
.sm-token-sheet{color:#007c9b;font-weight:700}
.sm-token-ref{color:#b65700;font-weight:700}
.sm-token-operator{color:#d10f55;font-weight:700}
.sm-token-boolean{color:#7550b8;font-weight:700}
.sm-token-error{color:#d10f55;font-weight:700}
.sm-token-fn{color:#3f7f00;font-weight:700}
.sm-token-paren{color:#8a6d00;font-weight:700}
