:root {
  --row-h: 24px;
  --col-w: 100px;
  --header-h: 24px;
  --header-w: 56px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; height: 100vh; display: flex; flex-direction: column; }
.toolbar, .style-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-bottom: 1px solid #ddd; align-items: center; background:#fafafa; }
.toolbar.grouped .tool-group { display:flex; align-items:center; gap:8px; padding-right:10px; margin-right:4px; border-right:1px dashed #cbd5e1; }
.toolbar.grouped .tool-group:last-child { border-right:none; }
button { border:1px solid #cbd5e1; background:#fff; border-radius:8px; padding:5px 10px; cursor:pointer; }
button:hover { background:#f1f5f9; }
.icon-btn { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:54px; padding:4px 8px; }
.icon-btn .icon { font-size:16px; line-height:1; }
.icon-btn .mini { font-size:10px; color:#475569; line-height:1; }
.popup-wrap { position:relative; }
.popup { position:absolute; top:36px; left:0; background:#fff; border:1px solid #cbd5e1; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; flex-direction:column; padding:6px; gap:6px; z-index:20; min-width:140px; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.active { background:#dbeafe; border-color:#60a5fa; }

.sheet-tabs { display:flex; gap:6px; padding:6px 8px; border-bottom:1px solid #ddd; overflow-x:auto; }
.sheet-tab { padding:4px 10px; border:1px solid #bbb; border-radius:8px; cursor:pointer; background:#f3f3f3; white-space:nowrap; }
.sheet-tab.active { background:#dbeafe; border-color:#60a5fa; }

.formula-bar { display:flex; gap:8px; align-items:center; padding:6px 8px; border-bottom:1px solid #ddd; }
.name-box { width:90px; height:28px; border:1px solid #ccc; padding:4px 6px; font-size:12px; background:#fafafa; }
.formula-input { flex:1; height:28px; border:1px solid #ccc; padding:4px 8px; font-size:13px; }

.grid-wrap { position:relative; flex:1; overflow:hidden; }
.corner { position:absolute; left:0; top:0; width:var(--header-w); height:var(--header-h); border-right:1px solid #ccc; border-bottom:1px solid #ccc; background:#f8f8f8; z-index:5; }
.col-headers { position:absolute; left:var(--header-w); right:0; top:0; height:var(--header-h); overflow:hidden; border-bottom:1px solid #ccc; background:#f8f8f8; z-index:4; }
.row-headers { position:absolute; top:var(--header-h); left:0; bottom:0; width:var(--header-w); overflow:hidden; border-right:1px solid #ccc; background:#f8f8f8; z-index:4; }
.viewport { position:absolute; top:var(--header-h); left:var(--header-w); right:0; bottom:0; overflow:auto; background:#fff; }
.spacer { position:absolute; top:0; left:0; }
.cells { position:absolute; top:0; left:0; }
.cell { position:absolute; width:var(--col-w); height:var(--row-h); border-right:1px solid #eee; border-bottom:1px solid #eee; padding:3px 5px; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#111; background:#fff; }
.cell.selected-range {
  background: rgba(59,130,246,0.14);
  outline: 1px dashed #60a5fa;
  outline-offset: -2px;
}
.cell.drag-target {
  background: rgba(16,185,129,0.18);
  outline: 1px dashed #10b981;
  outline-offset: -2px;
}
.cell.selected {
  background: rgba(59,130,246,0.22);
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  z-index: 3;
}
.header-cell { position:absolute; border-right:1px solid #ddd; border-bottom:1px solid #ddd; text-align:center; font-size:12px; line-height:var(--header-h); }
.row-header-cell { position:absolute; width:var(--header-w); height:var(--row-h); border-bottom:1px solid #ddd; text-align:center; font-size:12px; line-height:var(--row-h); }
.editor { position:absolute; z-index:10; border:2px solid #3b82f6; padding:3px 5px; font-size:12px; margin:0; box-sizing:border-box; }
#authLabel,#status { color:#334155; font-size:12px; }

.modal { position:fixed; inset:0; background:rgba(15,23,42,.4); display:flex; align-items:center; justify-content:center; z-index:100; }
.hidden { display:none; }
.modal-card { width:320px; background:#fff; border-radius:12px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:10px; }
.chart-card { width:min(92vw, 860px); }
.modal-card input, .modal-card select { height:34px; border:1px solid #cbd5e1; border-radius:8px; padding:0 10px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; }
.share-user-list { max-height:220px; overflow:auto; border:1px solid #cbd5e1; border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:4px; }
.share-user-item { display:flex; align-items:center; gap:8px; padding:6px; border-radius:6px; }
.share-user-item:hover { background:#f1f5f9; }
#chartCanvas { width:100% !important; height:420px !important; border:1px solid #e2e8f0; border-radius:8px; }
.chart-controls { display:grid; grid-template-columns: repeat(5, minmax(120px,1fr)); gap:8px; }
.chart-controls input, .chart-controls select { height:34px; border:1px solid #cbd5e1; border-radius:8px; padding:0 10px; }
.data-tools-card { width:min(92vw, 380px); }
.data-grid { display:grid; grid-template-columns: 130px minmax(140px,1fr); gap:8px; align-items:center; }
.field-label { font-size:12px; color:#475569; }
.data-tools-card input, .data-tools-card select { width:100%; min-width:0; }
.sheet-menu { position:fixed; z-index:120; background:#fff; border:1px solid #cbd5e1; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.16); padding:6px; min-width:160px; display:flex; flex-direction:column; gap:6px; }
.sheet-menu.hidden { display:none !important; }
.sheet-menu button { text-align:left; }