:root{
  --bg:#f7f9fd;
  --fg:#0f172a;
  --border:#d6deeb;
  --accent:#2563eb;
  --muted:#64748b;
}
*{box-sizing:border-box}
html,body{
  height:100%;margin:0;background:var(--bg);
  color:var(--fg);font:14px/1.28 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
body{display:flex;flex-direction:column}

.toolbar{
  display:flex;gap:.75rem;align-items:center;padding:.85rem 1.25rem;
  background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;
  box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.btn{
  background:#fff;color:var(--fg);border:1px solid var(--border);border-radius:.55rem;
  padding:.5rem .95rem;cursor:pointer;transition:all .18s ease;font-weight:500;
}
.btn:hover{border-color:#b9c6e4;box-shadow:0 3px 8px rgba(15,23,42,.08)}
.btn-secondary{background:#f1f5f9}
.sheet-name{color:var(--muted);font-size:.95rem;font-weight:500}
.status{margin-left:auto;color:var(--muted);font-size:.9rem}

.editorbar{
  display:flex;flex-direction:column;gap:.4rem;
  padding:.6rem 1.25rem;background:#f8fafc;
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 -1px 0 rgba(226,232,240,.8);
  position:sticky;top:64px;z-index:9;
}
.editor-tabs{display:flex;gap:.4rem;align-items:center}
.editor-tab{
  border:1px solid transparent;border-radius:.5rem;
  background:#e2e8f0;color:#475569;font-weight:600;
  padding:.35rem .75rem;cursor:pointer;transition:all .18s ease;
}
.editor-tab:hover{box-shadow:0 4px 10px rgba(148,163,184,.25)}
.editor-tab.active{
  background:#2563eb;color:#fff;border-color:#1d4ed8;
  box-shadow:0 6px 16px rgba(37,99,235,.22);
}
.editor-panels{display:flex;flex-direction:column;gap:.6rem}
.editor-panel{display:none}
.editor-panel.active{display:block}
.editor-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.editor-group{display:flex;gap:.35rem;align-items:center}
.editor-btn{
  border:1px solid var(--border);border-radius:.45rem;
  background:#fff;color:#1f2933;font-weight:600;
  padding:.35rem .55rem;min-width:2.2rem;
  cursor:pointer;transition:all .15s ease;
}
.editor-btn:hover{
  border-color:#94a3b8;
  box-shadow:0 2px 6px rgba(15,23,42,.12);
}
.editor-btn.active{
  background:#2563eb;color:#fff;border-color:#1d4ed8;
  box-shadow:0 4px 12px rgba(37,99,235,.28);
}
.editor-btn[data-action="italic"]{font-style:italic}
.editor-btn[data-action="bold"]{font-weight:700}
.editor-btn[data-action="underline"]{text-decoration:underline}
.editor-btn[data-action="strike"]{text-decoration:line-through}
.editor-color{
  display:flex;align-items:center;gap:.35rem;
  font-size:.85rem;color:#475569;
}
.editor-color input{
  width:36px;height:28px;padding:0;
  border:1px solid var(--border);border-radius:.45rem;
  background:#fff;cursor:pointer;
}
.editor-select{
  display:flex;align-items:center;gap:.25rem;
}
.editor-select select{
  border:1px solid var(--border);border-radius:.45rem;
  padding:.28rem .55rem;background:#fff;color:#1f2933;
  font-size:.85rem;min-width:130px;
}
.editor-select select:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:1px}
.zoom-label{font-size:.85rem;color:#475569;font-weight:600}
.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;
}

.sheet-container{
  flex:1;padding:1.25rem;display:flex;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,250,252,.9));
}

.sheet-scroll{
  flex:1;min-height:0;overflow:auto;white-space:nowrap;
  border:1px solid var(--border);border-radius:.75rem;
  background:#fff;box-shadow:0 16px 28px rgba(148,163,184,.25);
  padding:1.5rem;
}

.sheet-wrapper{
  position:relative;display:inline-block;
  background:#fff;border-radius:.5rem;
}

.sheet-table{
  border-collapse:separate;border-spacing:0;
  color:var(--fg);font-size:.84rem;
  background:#fff;
  box-shadow:0 4px 18px rgba(148,163,184,.24);
  border:1px solid #e2e8f0;border-radius:.5rem;
  table-layout:fixed;
}

.sheet-table colgroup col{border-right:1px solid var(--border)}
.sheet-table thead th{
  position:sticky;top:0;z-index:3;
  background:#e5edff;color:#1e293b;
  font-weight:600;font-size:.82rem;
  border-bottom:1px solid #cbd5f5;
  padding:.32rem .5rem;text-align:center;
}
.sheet-table thead .corner{
  left:0;z-index:4;background:#dbeafe;
  border-right:1px solid #cbd5f5;
}

.sheet-table tbody th{
  position:sticky;left:0;z-index:2;
  background:#f1f5f9;color:#475569;
  font-weight:500;border-right:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
  text-align:right;padding:.16rem .4rem;
  width:48px;min-width:48px;
  line-height:1.05;
}

.sheet-table td{
  min-width:64px;
  border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;
  padding:.1rem .26rem;
  vertical-align:top;white-space:nowrap;
  background:#fff;overflow:visible;
  outline:none;
  line-height:1.05;
}

.sheet-table td strong{font-weight:600}

.sheet-table td.empty{background:#fafbff;color:#94a3b8}
.sheet-table td.empty.selected{color:var(--fg)}
.sheet-table td:focus{outline:none}
.sheet-table td.selected{box-shadow:0 0 0 2px rgba(37,99,235,.5) inset}

.sheet-images{
  pointer-events:none;
  position:absolute;top:0;left:0;
}
.sheet-images img{
  position:absolute;box-shadow:0 6px 18px rgba(15,23,42,.2);
  border-radius:.35rem;
 
}




.sheet-table.highlight-merges td[data-merge="anchor"]{
  box-shadow:0 0 0 2px rgba(56,189,248,.65) inset;
}

body.compact-rows .sheet-table td{padding:.08rem .2rem;line-height:1}
body.compact-rows .sheet-table tbody th{padding:.12rem .32rem;line-height:1}

.sheet-wrapper{transform-origin:0 0}

.sheet-tabs{
  margin-top:1rem;display:flex;gap:.5rem;flex-wrap:wrap;
}
.sheet-tab{
  padding:.35rem .75rem;border-radius:.45rem;
  background:#e2e8f0;color:#475569;font-weight:500;
  border:1px solid transparent;cursor:pointer;
  transition:all .15s ease;
}
.sheet-tab:hover{box-shadow:0 4px 10px rgba(148,163,184,.25)}
.sheet-tab.active{
  background:#2563eb;color:#fff;
  box-shadow:0 8px 16px rgba(37,99,235,.25);
}