#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.formula-bar { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: #fff; border-bottom: 1px solid var(--rb-line, #e1dfdd); }
.cell-ref { min-width: 60px; text-align: center; border: 1px solid var(--rb-line,#e1dfdd); border-radius: 3px; padding: 3px 6px; font-size: 12px; }
.formula-bar .fx { color: #888; font-style: italic; font-size: 12px; }
.formula-input { flex: 1; border: 1px solid transparent; padding: 4px 6px; font-size: 13px; outline: none; font-family: Calibri, "Segoe UI", sans-serif; }
.formula-input:focus { border-color: #107c41; }

.grid-wrap { flex: 1; overflow: auto; background: #fff; }
.grid { display: inline-grid; border-collapse: collapse; }
.grid .hcell, .grid .rownum {
  position: sticky; background: #f3f3f3; color: #444; font-size: 11px; font-weight: 600;
  border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center; user-select: none;
}
.grid .hcell { top: 0; z-index: 2; height: 22px; }
.grid .rownum { left: 0; z-index: 1; width: 40px; }
.grid .corner { position: sticky; top: 0; left: 0; z-index: 3; background: #e8e8e8; border: 1px solid #d0d0d0; }
.grid .cell {
  min-width: 88px; height: 22px; border: 1px solid #e0e0e0; padding: 1px 5px; font-size: 13px;
  outline: none; overflow: hidden; white-space: nowrap; background: #fff; font-family: Calibri, "Segoe UI", sans-serif;
}
.grid .cell.num { text-align: right; }
.grid .cell.sel { outline: 2px solid #107c41; outline-offset: -2px; z-index: 4; position: relative; }
.grid .cell.has-dv { position: relative; }
.grid .cell.has-dv::after { content: "▾"; position: absolute; right: 2px; top: 2px; font-size: 9px; color: #107c41; background: #e6f4ec; border-radius: 2px; padding: 0 1px; }
.grid .cell.has-cmt { position: relative; }
.grid .cell.has-cmt::before { content: ""; position: absolute; right: 0; top: 0; border-width: 5px; border-style: solid; border-color: #c62f22 #c62f22 transparent transparent; pointer-events: none; }
.pen.sel { outline: 2px solid var(--app-accent,#107c41); outline-offset: 1px; }

.sheet-tabs { display: flex; align-items: center; gap: 2px; height: 28px; background: var(--app-accent,#107c41); padding: 0 8px; }
.sheet-tab { background: #fff; color: #107c41; font-size: 12px; font-weight: 600; padding: 4px 14px; border-radius: 4px 4px 0 0; }
.add-sheet { color: #fff; cursor: pointer; padding: 4px 8px; font-weight: 700; }

/* view toggles */
.grid.no-gridlines .cell { border-color: transparent; }
.grid.no-headings .hcell, .grid.no-headings .rownum, .grid.no-headings .corner { display: none; }
.formula-bar.hidden { display: none; }
.grid .cell.froz { position: sticky; z-index: 3; background: #fff; }

/* cell right-click context menu */
.ctx { position: fixed; z-index: 90; background: #fff; border: 1px solid #d0cfce; border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.22); overflow: hidden; min-width: 190px; }
.ctx[hidden] { display: none; }
.ctx-mini { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid #eee; background: #faf9f8; flex-wrap: wrap; }
.ctx-mini button { min-width: 26px; height: 26px; border: 1px solid transparent; background: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; }
.ctx-mini button:hover { background: #eee; border-color: #ddd; }
.ctx-list { padding: 5px; }
.ctx-list button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: none; background: none; padding: 7px 12px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.ctx-list button:hover { background: #f0f0f0; }
.ctx-sep { height: 1px; background: #eee; margin: 4px 6px; }

/* pen tiles + theme tiles in ribbon */
.pen { width: 26px; height: 40px; border-radius: 4px 4px 8px 8px; margin: 0 2px; cursor: pointer; border: 1px solid rgba(0,0,0,.1); }
.pen:hover { outline: 2px solid var(--app-accent,#107c41); }
.theme-tile { width: 58px; height: 40px; border-radius: 4px; border: 1px solid var(--fo-line); cursor: pointer; margin: 0 3px; overflow: hidden; }
.theme-tile:hover { outline: 2px solid var(--app-accent,#107c41); }

.sidebar-float { position: fixed; top: 118px; right: 14px; width: 210px; background: #fff; border: 1px solid var(--fo-line);
  border-radius: 10px; box-shadow: var(--fo-shadow); padding: 12px; z-index: 30; }
.sidebar-float .doc-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.sidebar-float .doc-list li { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; justify-content: space-between; }
.sidebar-float .doc-list li:hover { background: var(--fo-bg); }
.sidebar-float .doc-list li.active { background: #e6f4ec; color: #107c41; font-weight: 600; }
.sidebar-float .doc-del { opacity: .5; }
.sidebar-float .doc-del:hover { color: var(--fo-danger); opacity: 1; }