:root {
  color-scheme: light;
  font: 13px "Segoe UI", Arial, sans-serif;
  color: #233447;
  background: #f3f6f9;
  --accent: #0f766e;
  --line: #dde4eb;
  --selected: #e6f4ef;
}
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, select { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 7px 12px; }
button:hover { background: #e8f3f0; }
button:disabled { opacity: .46; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input, textarea { padding: 8px; border: 1px solid #cbd6df; border-radius: 3px; background: #fff; }
textarea { width: 100%; min-height: 170px; resize: vertical; font-family: Consolas, monospace; }
.primary { color: white; background: var(--accent); border-color: var(--accent); }
.primary:hover { background: #0b625a; }
[hidden] { display: none !important; }
#app { display: flex; flex-direction: column; height: 100%; min-width: 280px; }
.document-bar { display: flex; align-items: center; gap: 18px; padding: 12px 18px; background: #fff; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; color: white; background: var(--accent); font-weight: 600; }
.brand strong { font-size: 15px; font-weight: 600; }
.brand small { display: block; font-size: 9px; letter-spacing: 1px; color: #7a8a9c; margin-top: 2px; }
#document-title { flex: 1; min-width: 0; color: #526477; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#saved-state { font-size: 11px; padding: 4px 8px; border-radius: 12px; background: #e8f6ef; color: #146c43; }
#saved-state.unsaved { background: #fff3dc; color: #946109; }
.file-actions { display: flex; gap: 6px; flex-shrink: 0; }
.file-actions button { min-width: 62px; }
#menubar { display: flex; align-items: center; gap: 1px; padding: 3px 12px; min-height: 35px; border-block: 1px solid var(--line); background: #f8fafc; overflow-x: auto; flex-shrink: 0; }
#menubar > button { border: 0; background: transparent; padding: 6px 12px; border-radius: 2px; flex-shrink: 0; }
#menubar > button:hover, #menubar > button[aria-expanded="true"] { background: #dceee8; color: #0b5b54; }
.formula-line { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #f8fafc; border-bottom: 1px solid var(--line); min-height: 49px; }
#address-form { width: 72px; flex-shrink: 0; }
#name-box { width: 100%; color: var(--accent); }
#function-button { color: var(--accent); font-family: Georgia, serif; font-style: italic; font-size: 17px; padding: 3px 10px; }
#cancel-edit, #commit-edit { width: 27px; padding: 6px 0; border: 0; background: transparent; }
#formula { flex: 1; min-width: 0; font-family: Consolas, monospace; border-color: var(--line); }
#number-format { max-width: 130px; }
#error-strip { display: flex; align-items: center; gap: 10px; background: #fff0ef; color: #a82f25; padding: 5px 12px; border-bottom: 1px solid #f1c1bb; }
#error-strip span { flex: 1; }
#error-strip button { padding: 1px 6px; color: inherit; background: transparent; border: 0; }
#grid-wrap { flex: 1; min-height: 90px; overflow: auto; position: relative; background: #fff; outline: none; overscroll-behavior: contain; }
#grid { border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; border-collapse: separate; font-size: 13px; user-select: none; }
#grid th, #grid td { width: 112px; min-width: 112px; max-width: 112px; height: 26px; padding: 0; border-right: 1px solid #e1e6eb; border-bottom: 1px solid #e1e6eb; }
#grid thead { position: sticky; top: 0; z-index: 10; }
#grid th { background: #f1f4f7; font-weight: 400; color: #66788a; text-align: center; cursor: pointer; }
#grid tbody th, #grid .corner { width: 42px; min-width: 42px; max-width: 42px; position: sticky; left: 0; z-index: 8; }
#grid .corner { z-index: 12; }
#grid tbody th { background: #f7f9fb; }
#grid td { position: relative; cursor: cell; background: white; }
.cell-value { padding: 4px 7px; height: 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#grid td.numeric .cell-value { text-align: right; }
#grid td.formula .cell-value { color: #245c53; }
#grid td.error .cell-value { color: #b42318; background: #fff5f3; }
#grid td.selected { background: var(--selected); }
#grid td.active { box-shadow: inset 0 0 0 2px var(--accent); background: #fff; }
#grid th.highlighted { background: #dceee7; color: #0c645b; }
#grid-wrap.no-gridlines td { border-color: transparent; }
#selection-outline { position: absolute; pointer-events: none; z-index: 6; border: 2px solid var(--accent); }
.cell-editor { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border: 2px solid var(--accent); border-radius: 0; z-index: 7; padding: 2px 6px; font-family: Consolas, monospace; outline: none; box-shadow: 0 1px 5px #0001; }
.sheet-bar { display: flex; align-items: center; gap: 18px; padding: 0 12px; min-height: 35px; background: #f8fafc; border-top: 1px solid var(--line); }
.sheet-tab { border: 0; border-bottom: 3px solid var(--accent); background: white; border-radius: 0; color: var(--accent); font-weight: 600; padding: 9px 16px 7px; }
#selection-label, .engine-label { color: #718295; font-size: 11px; }
.engine-label { margin-left: auto; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 14px; min-height: 32px; border-top: 1px solid var(--line); color: #66788a; font-size: 11px; background: #eef3f6; }
#message { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#summary { flex-shrink: 0; color: #34495c; white-space: nowrap; }
#menu-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.popup-menu { pointer-events: auto; position: absolute; min-width: 236px; max-width: min(360px, calc(100vw - 16px)); max-height: calc(100dvh - 24px); overflow-y: auto; background: white; border: 1px solid #c7d2dc; border-radius: 3px; box-shadow: 0 5px 18px #172f4526; padding: 4px; }
.popup-menu > button { display: flex; align-items: center; gap: 24px; width: 100%; text-align: left; border: 0; border-radius: 2px; padding: 7px 11px; background: transparent; white-space: nowrap; }
.popup-menu > button:hover, .popup-menu > button:focus-visible { background: #deeee7; outline: none; }
.popup-menu .menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.popup-menu kbd { font: inherit; font-size: 11px; color: #7b8b9b; }
.popup-menu .submenu::after { content: ">"; color: #718295; }
.popup-menu > button:disabled:hover { background: transparent; }
.popup-menu .toggled .menu-label::before { content: "\2713"; margin-right: 7px; color: var(--accent); }
dialog { padding: 0; width: min(760px, calc(100vw - 28px)); max-height: calc(100dvh - 36px); border: 1px solid #cbd6df; border-radius: 8px; color: #233447; box-shadow: 0 20px 70px #152b4540; }
dialog::backdrop { background: #172f454d; }
.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.dialog-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
.dialog-header button { padding: 2px 7px; background: transparent; border: 0; }
.dialog-body { padding: 18px 20px; }
.dialog-body p { line-height: 1.65; }
.dialog-body label { display: grid; gap: 6px; margin-bottom: 14px; color: #526477; }
.dialog-body label.checkbox-label { display: flex; align-items: center; gap: 8px; }
.dialog-body input, .dialog-body select { width: 100%; }
.dialog-body input[type="checkbox"] { width: auto; }
.dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line); background: #f8fafc; position: sticky; bottom: 0; }
.function-filters { display: grid; grid-template-columns: 1fr 190px; gap: 12px; }
.function-layout { display: grid; grid-template-columns: 210px 1fr; gap: 18px; }
.function-list { border: 1px solid var(--line); border-radius: 4px; overflow: auto; height: 285px; }
.function-list button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; padding: 7px 12px; font-family: Consolas, monospace; }
.function-list button[aria-selected="true"] { background: #dcefe7; color: #0b645c; }
.function-details { min-width: 0; }
.function-details h3 { font-size: 17px; margin: 3px 0 12px; color: var(--accent); }
.function-details code { display: block; overflow-wrap: anywhere; white-space: pre-wrap; font: 12px/1.7 Consolas, monospace; padding: 10px; background: #f3f7f9; border-radius: 3px; }
.compatibility, .function-count { font-size: 11px; color: #7b8b9a; line-height: 1.6; margin: 10px 0 0; }
.selection-chart { display: block; width: 100%; height: auto; }
#app[aria-busy="true"] #grid-wrap { cursor: progress; }
#app[aria-busy="true"] #menubar, #app[aria-busy="true"] .file-actions { opacity: .65; }
@media (max-width: 640px) {
  .document-bar { padding: 9px 12px; gap: 10px; }
  .brand small, .engine-label, #number-format { display: none; }
  #saved-state { padding: 3px 5px; font-size: 10px; }
  .file-actions button { min-width: 45px; padding: 6px 9px; }
  #menubar { padding-inline: 5px; }
  #menubar > button { padding-inline: 10px; }
  .formula-line { padding-inline: 8px; gap: 3px; }
  #address-form { width: 59px; }
  footer { flex-wrap: wrap; gap: 5px; }
  #message { width: 100%; }
  .function-filters, .function-layout { grid-template-columns: 1fr; }
  .function-list { height: 150px; }
  .dialog-body { padding: 14px; }
}
@media (max-width: 420px) {
  .brand { gap: 6px; }
  .brand strong { font-size: 13px; }
  #saved-state, .file-actions [data-command="new"] { display: none; }
  #document-title { font-size: 11px; }
  .popup-menu > button { gap: 10px; }
}