:root {
  --bg: #ffffff; --fg: #1f1f1f; --muted: #5f6368; --line: #e1e3e1; --head: #f8f9fa; --panel: #f9fbfd;
  --accent: #1a73e8; --accent-bg: #e8f0fe; --sel-bg: rgba(26, 115, 232, .1); --danger: #d93025; --shadow: 0 2px 6px rgba(60, 64, 67, .3);
  --cell-font: Arial, "Malgun Gothic", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #1f1f1f; --fg: #e3e3e3; --muted: #9aa0a6; --line: #3c4043; --head: #28292a; --panel: #242526; --accent: #8ab4f8; --accent-bg: #283142; --sel-bg: rgba(138, 180, 248, .15); --shadow: 0 2px 8px rgba(0, 0, 0, .6); }
}
:root[data-theme="dark"] { --bg: #1f1f1f; --fg: #e3e3e3; --muted: #9aa0a6; --line: #3c4043; --head: #28292a; --panel: #242526; --accent: #8ab4f8; --accent-bg: #283142; --sel-bg: rgba(138, 180, 248, .15); --shadow: 0 2px 8px rgba(0, 0, 0, .6); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px "Google Sans", Roboto, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; border-radius: 4px; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); color: #fff; padding: 7px 18px; border-radius: 18px; }
button.link { color: var(--accent); padding: 4px 6px; }
input, select, textarea { font: inherit; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }
.muted { color: var(--muted); }
.grow { flex: 1; }
.rel { position: relative; }
.col { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 8px; align-items: center; }

/* sign-in */
.login-page { min-height: 100%; display: grid; place-items: center; background: var(--panel); }
.login { width: min(360px, 92vw); display: flex; flex-direction: column; gap: 12px; padding: 36px 32px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.login-logo { font-size: 24px; color: #188038; font-weight: 500; }
.login .error { color: var(--danger); min-height: 1em; font-size: 13px; }
.notice { padding: 60px 24px; text-align: center; }

/* home */
.home .top { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.home .search { width: min(480px, 40vw); border-radius: 8px; background: var(--panel); border: 0; padding: 10px 14px; }
.home section { max-width: 1000px; margin: 0 auto; padding: 16px; }
.home .new { background: var(--panel); max-width: none; }
.home .new > * { max-width: 968px; margin-left: auto; margin-right: auto; }
.new-title { margin: 8px auto 12px; font-weight: 500; }
.new-blank { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 160px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.new-blank .plus { font-size: 48px; color: var(--accent); line-height: 1; }
.doc-row { display: grid; grid-template-columns: 1fr 160px 200px; gap: 8px; padding: 10px 8px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.doc-row:hover:not(.head) { background: var(--accent-bg); }
.doc-row.head { color: var(--muted); font-size: 13px; }
.doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .doc-row { grid-template-columns: 1fr; } .doc-row span:not(.doc-name) { display: none; } }

/* editor chrome */
.editor { display: flex; flex-direction: column; height: 100vh; }
.editor .top { display: flex; align-items: center; gap: 10px; padding: 6px 12px 0; }
.logo { font-size: 26px; color: #188038; text-decoration: none; }
.title-box { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-title { font-size: 18px; border: 1px solid transparent; padding: 2px 6px; min-width: 120px; max-width: 40vw; }
.doc-title:hover:not(:disabled), .doc-title:focus { border-color: var(--line); }
.status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.status[data-state="offline"] { color: var(--danger); }
.ro-badge { font-size: 12px; background: var(--head); border: 1px solid var(--line); padding: 2px 8px; border-radius: 10px; }
.avatars { display: flex; gap: 4px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 13px; flex: none; }
.share-btn { background: #c2e7ff; color: #001d35; padding: 8px 18px; border-radius: 18px; font-weight: 500; }
.icon-btn { padding: 6px 8px; }
.me { font-size: 13px; color: var(--muted); }
.menubar { display: flex; gap: 2px; padding: 0 56px; }
.menu-top { padding: 3px 8px; font-size: 14px; }
.menu-top:hover { background: var(--head); }
.toolbar { display: flex; align-items: center; gap: 2px; margin: 4px 10px; padding: 3px 8px; background: #edf2fa; border-radius: 24px; flex-wrap: wrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toolbar { background: #2d2f31; } }
.toolbar.readonly .tb-group { opacity: .4; pointer-events: none; }
.tb { min-width: 28px; height: 28px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 13px; position: relative; }
.tb:hover, .tb.on { background: rgba(68, 71, 70, .12); }
.tb.bold { font-weight: 700; } .tb.ital { font-style: italic; } .tb.strike { text-decoration: line-through; } .tb.under { text-decoration: underline; }
.tb-color { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tb-select { height: 28px; padding: 0 4px; border-color: transparent; background: transparent; }
.tb-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.tb-group { display: contents; }
.fxbar { display: flex; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.namebox { width: 96px; border: 0; border-right: 1px solid var(--line); border-radius: 0; text-align: left; }
.fx { color: var(--muted); padding: 0 10px; font-style: italic; }
.formula { flex: 1; border: 0; border-radius: 0; font-family: var(--cell-font); }
.main { flex: 1; display: flex; min-height: 0; }
.grid-wrap { flex: 1; position: relative; min-width: 0; }
.side { width: 320px; border-left: 1px solid var(--line); overflow: auto; padding: 12px; background: var(--panel); }
.side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tabs { display: flex; align-items: center; gap: 2px; padding: 4px 8px; border-top: 1px solid var(--line); background: var(--panel); overflow-x: auto; }
.tab, .tab-add, .tab-all { padding: 6px 14px; white-space: nowrap; }
.tab.on { background: var(--accent-bg); color: var(--accent); font-weight: 500; }

/* grid */
.grid { position: absolute; inset: 0; outline: none; overflow: hidden; font-family: var(--cell-font); font-size: 10pt; }
.g-corner { position: absolute; left: 0; top: 0; width: var(--hw, 46px); height: var(--hh, 24px); background: var(--head); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); z-index: 3; }
.g-colhead { position: absolute; left: var(--hw, 46px); right: 0; top: 0; height: var(--hh, 24px); overflow: hidden; background: var(--head); border-bottom: 1px solid var(--line); z-index: 2; }
.g-rowhead { position: absolute; left: 0; top: var(--hh, 24px); bottom: 0; width: var(--hw, 46px); overflow: hidden; background: var(--head); border-right: 1px solid var(--line); z-index: 2; }
.g-strip { position: relative; height: 100%; width: 100%; }
.g-colhead .h, .g-rowhead .h { position: absolute; display: grid; place-items: center; font-size: 11px; color: var(--muted); user-select: none; cursor: default; }
.g-colhead .h { top: calc(var(--hh, 24px) - 24px); height: 24px; border-right: 1px solid var(--line); }
.g-rowhead .h { left: calc(var(--hw, 46px) - 46px); width: 46px; border-bottom: 1px solid var(--line); }
.grp-btn { position: absolute; z-index: 3; width: 12px; height: 12px; padding: 0; border: 1px solid #80868b; border-radius: 2px; background: var(--bg); font: 10px/10px Arial; color: #444746; display: grid; place-items: center; }
.grp-btn:hover { background: var(--accent-bg); }
.grp-line { position: absolute; border-color: #80868b; border-style: solid; }
.grp-line.row { width: 5px; border-width: 1px 0 0 1px; }
.grp-line.col { height: 5px; border-width: 1px 0 0 1px; }
.g-colhead .h.on, .g-rowhead .h.on { background: #d3e3fd; color: #0b57d0; font-weight: 600; }
.g-body { position: absolute; left: var(--hw, 46px); top: var(--hh, 24px); right: 0; bottom: 0; overflow: auto; }
.g-canvas { position: relative; }
.g-layer { position: absolute; left: 0; top: 0; }
.g-pane { position: absolute; overflow: hidden; background: var(--bg); z-index: 2; }
.g-pane-top { box-shadow: 0 2px 0 #c4c7c5; } .g-pane-left { box-shadow: 2px 0 0 #c4c7c5; } .g-pane-corner { box-shadow: 2px 2px 0 #c4c7c5; z-index: 3; }
.gl { position: absolute; background: var(--line); pointer-events: none; }
.gl.v { width: 1px; } .gl.h { height: 1px; }
.g-layer .c { position: absolute; display: flex; align-items: flex-end; padding: 0 3px 2px; white-space: pre; overflow: hidden; line-height: 1.3; justify-content: flex-start; }
.g-layer .c[style*="text-align:right"] { justify-content: flex-end; } .g-layer .c[style*="text-align:center"] { justify-content: center; }
.g-layer .c.over { overflow: visible; z-index: 1; }
.g-layer .c .ov { flex: none; overflow: hidden; white-space: pre; }
.g-layer .c.wrap { white-space: pre-wrap; word-break: break-word; }
.g-layer .c.clip { overflow: hidden; }
.g-layer .c.merged:not([style*="background"]) { background: var(--bg); }
.g-layer .c.b { font-weight: 700; } .g-layer .c.i { font-style: italic; }
.g-layer .c.err { color: var(--danger); }
.g-layer .c.note::after { content: ""; position: absolute; right: 0; top: 0; border: 3px solid transparent; border-top-color: var(--fg); border-right-color: var(--fg); }
.g-layer .c.cmt::before { content: ""; position: absolute; right: 0; top: 0; border: 5px solid transparent; border-top-color: #f9ab00; border-right-color: #f9ab00; z-index: 1; }
.g-layer .rot { display: inline-block; white-space: pre; transform-origin: center; }
.g-layer .vstack { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: -2px; }
.g-layer .chk { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--muted); border-radius: 2px; margin: auto; position: relative; cursor: pointer; }
.g-layer .chk.on { background: var(--accent); border-color: var(--accent); }
.g-layer .chk.on::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.g-layer .c.invalid::after { content: ""; position: absolute; right: 0; top: 0; border: 4px solid transparent; border-top-color: #d93025; border-right-color: #d93025; }
.g-layer .c.dd, .g-layer .c.fh { align-items: center; }
.dd-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 26px; height: 18px; padding: 0 2px 0 8px; border-radius: 9px; background: #e8eaed; color: #202124; font-size: 9pt; cursor: pointer; }
.dd-chip .dd-text { overflow: hidden; text-overflow: ellipsis; }
.dd-arrow { flex: none; width: 14px; height: 14px; margin-left: auto; cursor: pointer; background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23444746'/%3E%3C/svg%3E"); }
.c.dd > .dd-text { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.flt { flex: none; width: 16px; height: 16px; margin-left: auto; border-radius: 3px; cursor: pointer; background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z' fill='%23188038'/%3E%3C/svg%3E"); }
.flt.on { background-color: #188038; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39A.998.998 0 0 0 18.95 4H5.04c-.83 0-1.3.95-.79 1.61z' fill='%23fff'/%3E%3C/svg%3E"); }
.c.fh:hover .flt { background-color: rgba(24, 128, 56, .12); }
.g-layer > .filter-box { border: 2px solid #188038; }
.g-layer > .prot-box { background: repeating-linear-gradient(-45deg, rgba(95, 99, 104, .14) 0 4px, transparent 4px 10px); }
.g-layer > div:not(.c) { position: absolute; pointer-events: none; }
.g-layer > .fill-handle { pointer-events: auto; }
.resize-line { background: var(--accent); z-index: 4; } .resize-line.v { width: 2px; } .resize-line.h { height: 2px; }
.g-colhead .h, .g-rowhead .h { overflow: visible; }
.rz { position: absolute; z-index: 1; }
.g-colhead .rz { right: -3px; top: 0; width: 6px; height: 100%; cursor: col-resize; }
.g-rowhead .rz { bottom: -3px; left: 0; height: 6px; width: 100%; cursor: row-resize; }
.rz:hover { background: var(--accent); opacity: .6; }
.unhide { position: absolute; z-index: 2; font-size: 9px; line-height: 1; padding: 2px 1px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.g-colhead .unhide.before { left: 0; top: 6px; } .g-colhead .unhide.after { right: 2px; top: 6px; }
.g-rowhead .unhide.before { top: 0; left: 16px; } .g-rowhead .unhide.after { bottom: 1px; left: 16px; }
.freeze-v, .freeze-h { position: absolute; background: #c4c7c5; z-index: 2; }
.freeze-v { top: calc(var(--hh, 24px) - 24px); width: 4px; height: 24px; } .freeze-h { left: calc(var(--hw, 46px) - 46px); height: 4px; width: 46px; }
.g-tip { position: absolute; z-index: 6; max-width: 280px; padding: 8px 10px; background: var(--bg); color: var(--fg); box-shadow: var(--shadow); border-radius: 4px; white-space: pre-wrap; font-size: 13px; pointer-events: none; }
.sel-range { background: var(--sel-bg); border: 1px solid var(--accent); }
.sel-active { border: 2px solid var(--accent); margin: -1px 0 0 -1px; }
.sel-point { border: 2px dashed #a142f4; }
.sel-fill { border: 1px dashed var(--muted); }
.fill-handle { width: 7px; height: 7px; background: var(--accent); border: 1px solid #fff; pointer-events: auto !important; cursor: crosshair; z-index: 4; }
.peer { border: 2px solid; }
.peer-tag { color: #fff; font-size: 11px; padding: 0 4px; border-radius: 3px 3px 3px 0; white-space: nowrap; }
.g-input { position: absolute; display: none; z-index: 5; resize: none; border: 2px solid var(--accent); border-radius: 0; padding: 1px 3px; font: inherit; line-height: 1.3; background: var(--bg); box-shadow: var(--shadow); overflow: hidden; white-space: pre; }

/* menus and dialogs */
.menu-pop { position: fixed; z-index: 100; background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; padding: 6px 0; min-width: 220px; max-height: 80vh; overflow: auto; }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; cursor: default; white-space: nowrap; }
.menu-item:hover:not(.disabled) { background: var(--head); }
.menu-item.disabled { opacity: .4; }
.menu-check { width: 16px; text-align: center; color: var(--accent); }
.menu-label { flex: 1; }
.menu-key { color: var(--muted); font-size: 12px; }
.menu-sep { height: 1px; background: var(--line); margin: 6px 0; }
.dlg-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); display: grid; place-items: center; z-index: 200; }
.dlg { background: var(--bg); border-radius: 8px; padding: 22px 24px 16px; width: min(560px, 94vw); max-height: 88vh; overflow: auto; box-shadow: var(--shadow); }
.dlg-title { font-size: 20px; margin-bottom: 14px; }
.dlg-body { display: flex; flex-direction: column; gap: 10px; }
.dlg-input { width: 100%; }
.dlg-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.kv td { padding: 4px 10px 4px 0; vertical-align: top; }
.history td:first-child { white-space: nowrap; color: var(--muted); }
.fn-list { font-family: monospace; font-size: 12px; line-height: 1.7; max-height: 50vh; overflow: auto; }
.fn-table { max-height: 55vh; overflow: auto; }
.fn-row { display: flex; gap: 12px; padding: 5px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.fn-row b { flex: 0 0 150px; font-family: monospace; font-weight: 600; }
.ac-pop { position: fixed; z-index: 150; background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; padding: 4px 0; width: 420px; max-width: 92vw; }
.ac-item { display: flex; gap: 10px; padding: 5px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; }
.ac-item b { font-family: monospace; flex: none; } .ac-item .muted { overflow: hidden; text-overflow: ellipsis; }
.ac-item.on, .ac-item:hover { background: var(--accent-bg); }
.fn-hint { position: fixed; z-index: 140; max-width: 520px; background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; padding: 8px 12px; font-size: 13px; }
.search-list { max-height: 50vh; overflow: auto; }
.search-item { padding: 7px 10px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.search-item.on, .search-item:hover { background: var(--accent-bg); }
.emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.emoji { font-size: 22px; padding: 4px; } .emoji:hover { background: var(--head); }
.band-sample { width: 72px; height: 48px; border: 1px solid var(--line); color: #202124; font-size: 12px; }
.band-sample.on { outline: 3px solid var(--accent); outline-offset: 1px; }
.row.wrap { flex-wrap: wrap; }
.sort-key span { width: 72px; color: var(--muted); }
kbd { font-family: inherit; font-size: 12px; background: var(--head); border: 1px solid var(--line); border-radius: 3px; padding: 1px 6px; }
.tb-size { width: 38px; height: 26px; text-align: center; padding: 0 2px; border-color: var(--line); background: transparent; }
.tb-select.font { width: 112px; }
.tb.keep { padding: 0 4px; }
.tb.narrow { min-width: 16px; padding: 0 1px; margin-left: -2px; }
.ic { flex: none; display: block; color: #444746; }
:root[data-theme="dark"] .ic { color: #c4c7c5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic { color: #c4c7c5; } }
.tb.keep .ic + .ic { margin-left: -3px; }
.tb.on .ic { color: var(--accent); }
.tb-txt { font-size: 13px; font-weight: 500; color: #444746; white-space: nowrap; }
.tb-txt small { font-size: 9px; }
.share-btn { display: inline-flex; align-items: center; gap: 4px; }
.share-btn .ic { color: #001d35; }
.tab-add, .tab-all { display: inline-grid; place-items: center; padding: 4px 8px; }
.palette { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pal-reset { text-align: left; padding: 6px 4px; margin-bottom: 4px; }
.pal-reset:hover { background: var(--head); }
.pal-row { display: flex; gap: 2px; }
.pal-row.gap { margin-bottom: 8px; }
.pal-c { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); padding: 0; }
.pal-c:hover { transform: scale(1.15); }
.pal-c.on { box-shadow: 0 0 0 2px var(--accent); }
.pal-custom { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.pal-custom input { width: 32px; height: 22px; padding: 0; border: 0; background: none; }
.toast { position: fixed; left: 24px; bottom: 24px; background: #323232; color: #fff; padding: 12px 18px; border-radius: 4px; z-index: 300; box-shadow: var(--shadow); }
.share { gap: 10px; }
.share-add { display: flex; flex-direction: column; gap: 8px; }
.share-sub { font-weight: 500; margin-top: 8px; }
.member { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.suggest { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); box-shadow: var(--shadow); z-index: 10; border-radius: 4px; }
.suggest-item { padding: 8px 10px; cursor: pointer; } .suggest-item:hover { background: var(--head); }

/* side panels: data validation, conditional formatting, named ranges/functions, protection, column stats */
.panel { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.pf { display: flex; flex-direction: column; gap: 4px; }
.pf-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.pf-input { width: 100%; }
textarea.pf-input { resize: vertical; font-family: var(--cell-font); }
.pf-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.pf-btn { padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.pf-btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.pf-add { padding: 10px; border: 1px dashed var(--line); border-radius: 8px; color: var(--accent); text-align: left; }
.pf-add:hover { background: var(--accent-bg); }
.pf-tabs { display: flex; border-bottom: 1px solid var(--line); }
.pf-tab { flex: 1; padding: 8px; border-radius: 0; border-bottom: 3px solid transparent; }
.pf-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.pf-adv summary { cursor: pointer; color: var(--accent); margin-bottom: 6px; }
.pf-adv { display: flex; flex-direction: column; gap: 6px; }
.rule-card { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; position: relative; }
.rule-card:hover { border-color: var(--accent); }
.rule-card .row { align-items: center; }
.rule-range { font-weight: 500; }
.rule-order { position: absolute; right: 6px; top: 6px; display: flex; gap: 2px; }
.rule-order .pf-btn { padding: 0 5px; font-size: 10px; }
.cf-preview { display: inline-grid; place-items: center; min-width: 44px; height: 26px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; flex: none; }
.cf-preset { padding: 2px; }
.cf-sample { padding: 4px 0; }
.cf-color { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.cf-color input { width: 28px; height: 22px; padding: 0; border: 0; background: none; }
.dv-item select { width: 92px; flex: none; }
.small { font-size: 12px; }
.center { text-align: center; }
.prot-people { max-height: 200px; overflow: auto; padding-left: 8px; }
.freq { display: flex; flex-direction: column; gap: 4px; }
.freq-row { display: grid; grid-template-columns: 90px 1fr 36px; gap: 6px; align-items: center; }
.freq-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freq-bar { height: 12px; background: #4285f4; border-radius: 2px; min-width: 2px; }
.stats td.num { text-align: right; font-variant-numeric: tabular-nums; }
.flt-pop { width: 280px; padding: 6px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.flt-pop summary { cursor: pointer; padding: 4px 0; font-weight: 500; }
.flt-pop details { display: flex; flex-direction: column; gap: 6px; }
.flt-sort { text-align: left; padding: 6px 4px; }
.flt-sort:hover { background: var(--head); }
.flt-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; margin-top: 6px; }
.flt-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.flt-item span:nth-child(2) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-stats { margin-left: auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); white-space: nowrap; font-size: 13px; }
.dv-help { position: fixed; z-index: 90; max-width: 300px; background: var(--bg); box-shadow: var(--shadow); border-radius: 4px; padding: 8px 12px; font-size: 13px; pointer-events: none; }
.dv-bad { color: var(--danger); }
.tb.on .ic { color: var(--accent); }

/* floating charts and images */
.g-objects { position: absolute; left: 0; top: 0; z-index: 1; }
.obj { position: absolute; background: #fff; box-shadow: 0 0 0 1px #dadce0; cursor: default; user-select: none; }
.obj.chart svg { display: block; width: 100%; height: 100%; }
.obj.image img { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.obj.image { background: transparent; box-shadow: none; }
.obj.sel { outline: 2px solid #1a73e8; outline-offset: 0; cursor: move; }
.hdl { position: absolute; width: 8px; height: 8px; background: #fff; border: 1px solid #1a73e8; z-index: 2; }
.hdl.nw { left: -5px; top: -5px; cursor: nwse-resize; } .hdl.n { left: calc(50% - 4px); top: -5px; cursor: ns-resize; } .hdl.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.hdl.e { right: -5px; top: calc(50% - 4px); cursor: ew-resize; } .hdl.se { right: -5px; bottom: -5px; cursor: nwse-resize; } .hdl.s { left: calc(50% - 4px); bottom: -5px; cursor: ns-resize; }
.hdl.sw { left: -5px; bottom: -5px; cursor: nesw-resize; } .hdl.w { left: -5px; top: calc(50% - 4px); cursor: ew-resize; }
.obj-menu { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #444746; font-size: 16px; line-height: 1; z-index: 2; }
.obj-menu:hover { background: #e8eaed; }
.g-layer .cell-img { display: block; margin: auto; object-fit: contain; }
.g-layer .spark { display: block; margin: auto; }
.person { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 18px; padding: 0 8px 0 2px; border-radius: 9px; background: #e8eaed; color: #202124; cursor: pointer; overflow: hidden; }
.person-av { width: 14px; height: 14px; border-radius: 50%; background: #1a73e8; color: #fff; font-size: 9px; display: grid; place-items: center; flex: none; }

.pv-edit { position: fixed; z-index: 80; padding: 4px 12px; border-radius: 14px; background: #1a73e8; color: #fff; box-shadow: var(--shadow); font-size: 12px; }
.pv-section { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.pv-card { cursor: default; }
.pv-card .flt-list { max-height: 150px; }

.version-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #fef7e0; border-bottom: 1px solid #f9e1a0; color: #202124; }
.rule-card.version { cursor: default; gap: 6px; }

.calc-btn { font-size: 12px; padding: 2px 10px; border-radius: 12px; background: #fef7e0; border: 1px solid #f9ab00; color: #202124; }
.side.minimized .cm-body { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.side.minimized .cm-thread .cm:not(:first-of-type), .side.minimized .cm-actions { display: none; }
.rating { color: #dadce0; letter-spacing: 1px; cursor: pointer; font-size: 13px; }
.rating .star.on { color: #fbbc04; }
.file-chip .file-ic { width: 14px; height: 14px; color: #188038; font-size: 12px; display: grid; place-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.help-list { max-height: 50vh; overflow: auto; }
.help-item p { margin: 4px 0 10px; color: var(--muted); }

/* tables, filter views, slicers, theme */
.g-layer .c.th { align-items: center; }
.tbl-menu { flex: none; width: 16px; height: 16px; margin-left: auto; border-radius: 3px; cursor: pointer; background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23fff'/%3E%3C/svg%3E"); }
.tbl-menu:hover { background-color: rgba(255, 255, 255, .25); }
.g-layer > .tbl-name { height: 18px; padding: 0 8px; border-radius: 4px 4px 0 0; color: #fff; font: 600 11px/18px Arial, sans-serif; white-space: nowrap; }
.g-layer > .filter-box.view { border-color: #5f6368; }
.flt.view { filter: grayscale(1) brightness(.6); }
.fv-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #3c4043; color: #fff; }
.fv-label { font-weight: 600; font-size: 13px; }
.fv-name { background: #5f6368; color: #fff; border: 0; padding: 4px 8px; width: 200px; }
.fv-range { font-size: 12px; opacity: .8; }
.fv-btn { color: #fff; padding: 2px 8px; }
.fv-btn:hover { background: rgba(255, 255, 255, .15); }
.tbl-swatch { width: 40px; height: 28px; border: 1px solid var(--line); border-radius: 4px; }
.tbl-swatch.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.tbl-col select { width: 120px; }
.prebuilt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.prebuilt-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.prebuilt-card.on { border-color: var(--accent); background: var(--accent-bg); }
.obj.slicer { background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(60, 64, 67, .3); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font: 13px Arial, sans-serif; color: #202124; }
.slicer-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slicer-btn { display: flex; align-items: center; justify-content: space-between; border: 1px solid #dadce0; border-radius: 4px; padding: 4px 8px; background: #fff; cursor: pointer; font-size: 12px; }
.slicer-btn.on { border-color: #188038; color: #188038; }
.theme-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.theme-card.on { border-color: var(--accent); background: var(--accent-bg); }
.theme-swatches { display: flex; gap: 3px; }
.theme-swatches span { width: 18px; height: 12px; border-radius: 2px; }

.macro-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: #3c4043; color: #fff; }
.macro-bar .fv-btn.on { background: rgba(255, 255, 255, .2); border-radius: 4px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ea4335; animation: recblink 1s infinite; }
@keyframes recblink { 50% { opacity: .3; } }
.macro-row .dlg-input { flex: 1; }
.draw-dlg { width: min(720px, 96vw); }
.draw-canvas { border: 1px solid var(--line); background: #fff; aspect-ratio: 640 / 400; width: 100%; cursor: crosshair; user-select: none; }
.draw-canvas svg { display: block; width: 100%; height: 100%; }
.draw-tool.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.draw-tools { margin-bottom: 8px; }
.print-opts .dlg-input { max-width: 320px; }

/* comments */
.cm-thread, .cm-new { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.cm-thread.resolved { opacity: .6; }
.cm-where { font-size: 12px; color: var(--accent); cursor: pointer; margin-bottom: 6px; }
.cm { padding: 4px 0; }
.cm-author { font-weight: 500; font-size: 13px; } .cm-time { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 11px; }
.cm-body { white-space: pre-wrap; margin: 2px 0; }
.cm-compose { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cm-compose textarea { width: 100%; resize: vertical; }
.cm-compose button { align-self: flex-end; }

@media (max-width: 720px) { .menubar { padding: 0 8px; overflow-x: auto; } .side { position: absolute; right: 0; top: 0; bottom: 0; z-index: 20; width: 90vw; } .me { display: none; } }
@media print { .top, .menubar, .toolbar, .fxbar, .tabs, .side, .g-colhead, .g-rowhead, .g-corner { display: none !important; } .g-body { left: 0; top: 0; overflow: visible; } }

/* home: gallery, filters, document menu */
.gallery { gap: 14px; align-items: stretch; }
.new-blank.template .plus { font-size: 34px; color: #188038; }
.new-blank.upload .plus { font-size: 34px; color: #5f6368; }
.home .recent .row { margin-bottom: 4px; }
.home-filter { padding: 4px 8px; }
.doc-row { grid-template-columns: 1fr 160px 200px 36px; align-items: center; }
.doc-more { width: 30px; height: 30px; border-radius: 50%; color: var(--muted); font-size: 16px; }
.doc-more:hover { background: var(--head); }
@media (max-width: 640px) { .doc-row { grid-template-columns: 1fr 36px; } }