:root{--green:#107c41;--bg:#f3f3f3;--panel:#fff;--ink:#1f2430;--line:#d0d4da;--hover:#e5f3ea;--sel:rgba(16,124,65,.14);--hdr:#f0f2f4;--cell:#fff}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px "Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;overflow:hidden}
button,select,input{font:inherit;color:inherit}
button{background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 8px;cursor:pointer;min-height:28px;white-space:nowrap}
button:hover{background:var(--hover);border-color:var(--line)}
button.on{background:#cfe9d9;border-color:#7fc39b}
select,input[type=number]{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:3px 6px;min-height:28px}
.titlebar{background:var(--green);color:#fff;display:flex;align-items:center;gap:10px;padding:6px 12px;flex-wrap:wrap}
.logo{width:28px;height:28px;background:#0b5a2f;border-radius:6px;display:grid;place-items:center;font-weight:700}
#bookName{background:rgba(255,255,255,.15);border:0;border-radius:4px;color:#fff;font-weight:600;width:200px;padding:4px 8px;min-height:28px}
.savestate{font-size:12px;opacity:.85}
.tb-actions{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.titlebar button{color:#fff;background:rgba(255,255,255,.12)}
.titlebar button:hover{background:rgba(255,255,255,.28);border-color:transparent}
.ribbon-tabs{background:var(--panel);display:flex;padding:0 10px;border-bottom:1px solid var(--line)}
.ribbon-tabs button{border-radius:0;border:0;border-bottom:3px solid transparent;padding:8px 14px}
.ribbon-tabs button.active{border-bottom-color:var(--green);font-weight:600;color:var(--green)}
.ribbon{background:var(--panel);border-bottom:1px solid var(--line);min-height:72px}
.panel{display:none;padding:6px 8px;flex-wrap:wrap}
.panel.active{display:flex}
.group{display:flex;flex-direction:column;gap:4px;padding:2px 12px;border-right:1px solid var(--line);justify-content:space-between}
.group>label{font-size:11px;color:#7b8494;text-align:center}
.group.note{max-width:560px;border:0;justify-content:center}
.group.note code{background:#eef4f0;padding:1px 4px;border-radius:3px}
.row{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.b{font-weight:700}.i{font-style:italic}.u{text-decoration:underline}
label.color{position:relative;display:inline-grid;place-items:center;width:30px;height:28px;border:1px solid var(--line);border-radius:4px;cursor:pointer;font-weight:700}
label.color input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.fbar{display:flex;align-items:center;gap:6px;background:var(--panel);padding:4px 8px;border-bottom:1px solid var(--line);position:relative}
#nameBox{width:90px;text-align:center;border:1px solid var(--line);border-radius:4px;padding:3px;background:var(--panel)}
.fx{font-style:italic;color:var(--green);font-weight:700;padding:0 4px}
#fInput{flex:1;border:1px solid var(--line);border-radius:4px;padding:4px 8px;background:var(--panel);font-family:Consolas,monospace}
.hint{position:absolute;left:150px;top:100%;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.2);max-height:220px;overflow:auto;min-width:200px}
.hint div{padding:4px 12px;cursor:pointer;font-family:Consolas,monospace}
.hint div.act,.hint div:hover{background:var(--hover)}
.sheetwrap{flex:1;overflow:auto;position:relative;background:#fff}
.grid{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:13px;user-select:none}
.grid th{background:var(--hdr);border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:500;color:#555;position:sticky;top:0;z-index:3;height:24px;overflow:hidden;cursor:default}
.grid th.rh{position:sticky;left:0;top:auto;z-index:2;width:46px;min-width:46px;text-align:center;padding:0}
.grid th.corner{left:0;top:0;z-index:5;width:46px}
.grid th.sel{background:#cfe9d9;color:var(--green);font-weight:600}
.grid th .rz{position:absolute;right:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:6}
.grid td{border-right:1px solid #e1e4e8;border-bottom:1px solid #e1e4e8;padding:0 4px;height:22px;overflow:hidden;text-overflow:clip;white-space:nowrap;background:var(--cell);cursor:cell}
.grid td.wrap{white-space:normal;word-break:break-word;vertical-align:top}
.grid td.insel{background-image:linear-gradient(var(--sel),var(--sel))}
.grid td.act{outline:2px solid var(--green);outline-offset:-2px;z-index:1;position:relative}
.grid td.err{color:#c00000}
.grid td.hid,.grid tr.hid{display:none}
.grid.freeze tr:nth-child(2) td{position:sticky;top:24px;z-index:2}
.grid td.ref0{box-shadow:inset 0 0 0 2px #2b6de0}.grid td.ref1{box-shadow:inset 0 0 0 2px #d62e8a}.grid td.ref2{box-shadow:inset 0 0 0 2px #e08a00}.grid td.ref3{box-shadow:inset 0 0 0 2px #6a3dd1}
.grid td.cut{outline:2px dashed var(--green);outline-offset:-2px}
.cell-edit{position:absolute;z-index:20;border:2px solid var(--green);padding:0 4px;font:13px "Segoe UI",system-ui,sans-serif;background:#fff;outline:0;min-width:40px}
.cell-edit[hidden]{display:none}
.fill-handle{position:absolute;width:8px;height:8px;background:var(--green);border:1px solid #fff;cursor:crosshair;z-index:22}
.fill-handle[hidden]{display:none}
.bottom{display:flex;align-items:center;gap:4px;background:var(--panel);border-top:1px solid var(--line);padding:2px 8px;min-height:34px}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tab{padding:5px 14px;border:1px solid var(--line);border-bottom:3px solid transparent;background:var(--hdr);cursor:pointer;border-radius:4px 4px 0 0;white-space:nowrap}
.tab.active{background:#fff;border-bottom-color:var(--green);font-weight:600;color:var(--green)}
.grow{flex:1}
.stats{font-size:12px;color:#555}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;z-index:60}
.modal[hidden]{display:none}
.box{background:var(--panel);border-radius:8px;padding:16px;max-width:95vw;display:flex;flex-direction:column;gap:10px}
.box h3{margin:0}
#chartCv{max-width:100%;background:#fff;border:1px solid var(--line)}
.ctx{position:fixed;z-index:70;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.25);padding:4px 0;min-width:180px}
.ctx[hidden]{display:none}
.ctx div{padding:6px 16px;cursor:pointer}
.ctx div:hover{background:var(--hover)}
@media(max-width:700px){.tb-actions{margin-left:0}}
.grid.freeze tr:nth-child(2) th.rh{top:24px;z-index:4}

label.color{flex-direction:column}
label.color .cbar{position:absolute;left:5px;right:5px;bottom:2px;height:4px;border-radius:2px;background:var(--c,#ffff00);pointer-events:none}
.zoombox{display:flex;align-items:center;gap:4px;margin-left:10px}
.zoombox input[type=range]{width:110px;accent-color:var(--green)}
.zoombox button{min-width:28px;padding:2px 6px}
#zoomPct{min-width:52px;font-size:12px}