/* ==========================================================================
   Excel Pro Web — Full Desktop-Class Spreadsheet UI & Themes
   ========================================================================== */

:root {
  --brand-primary: #107c41;
  --brand-dark: #0c5e31;
  --brand-light: #dcfce7;
  --bg-app: #f8fafc;
  --bg-ribbon: #f3f4f6;
  --bg-panel: #ffffff;
  --border-color: #d1d5db;
  --border-subtle: #e5e7eb;
  --text-main: #0f172a;
  --text-muted: #475569;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.18);
}

body.theme-blue {
  --brand-primary: #1d4ed8;
  --brand-dark: #1e3a8a;
  --brand-light: #dbeafe;
}

body.theme-dark {
  --brand-primary: #15803d;
  --brand-dark: #0f172a;
  --brand-light: #1e3a8a;
  --bg-app: #0f172a;
  --bg-ribbon: #1e293b;
  --bg-panel: #1e293b;
  --border-color: #334155;
  --border-subtle: #334155;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

/* Prevent rubber-band bounce and scroll chaining in the editor, including
   dynamically created dialogs, menus and side panels. Keep normal scrolling. */
* {
  overscroll-behavior: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  font-size: 13px;
  color: var(--text-main);
  background: var(--bg-app);
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none !important;
}

/* ==================== TOP TITLEBAR ==================== */
.excel-titlebar {
  height: 38px;
  background: var(--brand-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  flex-shrink: 0;
}

.titlebar-left, .titlebar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.excel-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.logo-icon {
  width: 22px;
  height: 22px;
  background: #ffffff;
  color: var(--brand-primary);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
}

.qat-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.25);
  margin: 0 2px;
}

.qat-btn {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.qat-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.workbook-title-input {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12.5px;
  font-weight: 600;
  width: 210px;
}

.workbook-title-input:focus {
  outline: none;
  background: #ffffff;
  color: #0f172a;
}

.autosave-badge {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.22);
  padding: 3px 8px;
  border-radius: 99px;
  color: #dcfce7;
}

.autosave-badge.autosave-error {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
  cursor: help;
}

.qat-pill-btn {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 5px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.qat-pill-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.qat-pill-accent {
  background: #facc15;
  color: #0f172a;
  border-color: #fde047;
  font-weight: 700;
}

.qat-pill-accent:hover {
  background: #fde047;
}

.theme-select {
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11.5px;
  cursor: pointer;
}

/* ==================== RIBBON TABS & TOOLBAR ==================== */
.ribbon-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--brand-primary);
  padding: 0 10px;
  height: 29px;
  flex-shrink: 0;
}

.ribbon-tab-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
}

.ribbon-tab-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.ribbon-tab-btn.active {
  background: var(--bg-ribbon);
  color: var(--brand-primary);
  font-weight: 700;
}

body.theme-dark .ribbon-tab-btn.active {
  color: #4ade80;
}

.ribbon-tab-macro {
  color: #fef08a;
}

.ribbon-container {
  background: var(--bg-ribbon);
  border-bottom: 1px solid var(--border-color);
  height: 82px;
  padding: 5px 10px;
  flex-shrink: 0;
  overflow-x: auto;
}

.ribbon-panel {
  display: none;
  height: 100%;
  align-items: stretch;
  gap: 8px;
}

.ribbon-panel.active {
  display: flex;
}

.ribbon-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-inline-end: 10px;
  border-inline-end: 1px solid var(--border-color);
  flex-shrink: 0;
}

.ribbon-group:last-child {
  border-inline-end: none;
}

.ribbon-group-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.ribbon-col-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

.ribbon-inline-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ribbon-group-title {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 2px;
  font-weight: 500;
}

.rb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
}

.rb-btn:hover, .rb-btn-sm:hover, .rb-icon-btn:hover {
  background: var(--brand-light);
  border-color: var(--brand-primary);
}

.rb-btn-large {
  flex-direction: column;
  padding: 4px 10px;
  height: 54px;
  font-size: 16px;
  gap: 3px;
}

.rb-btn-large span {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.rb-btn-sm {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  height: 23px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rb-icon-btn {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  min-width: 25px;
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rb-icon-btn.active {
  background: var(--brand-light);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 700;
}

.rb-select {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  height: 24px;
  padding: 0 6px;
  font-size: 11.5px;
  cursor: pointer;
}

.rb-select-xs {
  width: 54px;
}

/* Reserve independent space for the numeric size and the shared chevron.
   The former 54px width left only a few pixels after the chevron padding. */
#font-size-select {
  box-sizing: border-box;
  width: calc(5ch + 44px);
  min-width: calc(5ch + 44px);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.rb-select-sm {
  width: 105px;
}

.color-picker-lbl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0 5px;
  height: 24px;
  font-size: 11px;
  cursor: pointer;
}

.color-picker-lbl input[type="color"] {
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
}

.rb-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}

.recording-pulse {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
  animation: pulseRed 1.2s infinite;
}

@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* ==================== FORMULA BAR ==================== */
.formula-bar-container {
  display: flex;
  align-items: center;
  height: 30px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-color);
  padding: 0 6px;
  gap: 6px;
  flex-shrink: 0;
}

.name-box-wrapper {
  width: 96px;
  flex-shrink: 0;
}

.name-box-input {
  width: 100%;
  height: 22px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background: var(--bg-app);
  color: var(--text-main);
}

.formula-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.fx-btn {
  width: 24px;
  height: 22px;
  border: 1px solid var(--border-color);
  background: var(--bg-app);
  color: var(--text-muted);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fx-btn:hover {
  background: var(--brand-light);
  color: var(--brand-primary);
}

.fx-insert {
  font-family: Georgia, serif;
  font-weight: 700;
  color: var(--brand-primary);
}

.formula-input-wrapper {
  flex: 1;
  height: 22px;
}

.formula-bar-input {
  width: 100%;
  height: 100%;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 0 8px;
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 12.5px;
  background: var(--bg-panel);
  color: var(--text-main);
}

.formula-bar-input:focus {
  outline: 1px solid var(--brand-primary);
}

/* ==================== VIRTUALIZED GRID WORKSPACE ==================== */
.workspace-row {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.grid-workspace {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: var(--bg-panel);
}

#grid-canvas {
  display: block;
  user-select: none;
}

/* In-Cell Editor Overlay */
.cell-editor {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: absolute;
  z-index: 30;
  background: #ffffff;
  border: 2px solid #15803d;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
}

.cell-editor input {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 5px;
  font-family: Calibri, "Segoe UI", sans-serif;
  font-size: 12.5px;
  color: #0f172a;
  background: #ffffff;
}

/* Formula Autocomplete Dropdown */
.formula-autocomplete {
  position: absolute;
  z-index: 40;
  width: 340px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
}

.fn-ac-item {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.fn-ac-item:hover {
  background: var(--brand-light);
}

.fn-ac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fn-ac-name {
  font-weight: 700;
  color: var(--brand-primary);
  font-family: monospace;
  font-size: 13px;
}

.fn-ac-cat {
  font-size: 10px;
  background: var(--bg-ribbon);
  padding: 1px 6px;
  border-radius: 99px;
  color: var(--text-muted);
}

.fn-ac-syntax {
  font-size: 11px;
  font-family: monospace;
  color: var(--text-main);
  margin-top: 2px;
}

.fn-ac-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Data Validation Dropdown */
.validation-dropdown-btn {
  position: absolute;
  z-index: 25;
  width: 20px;
  background: var(--brand-primary);
  color: #ffffff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
}

.validation-dropdown-menu {
  position: absolute;
  z-index: 35;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: var(--shadow-lg);
  max-height: 200px;
  overflow-y: auto;
}

.val-menu-item {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
}

.val-menu-item:hover {
  background: var(--brand-light);
}

/* Cell Comment Tooltip */
.cell-comment-tooltip {
  position: absolute;
  z-index: 45;
  background: #fef9c3;
  color: #1e293b;
  border: 1px solid #facc15;
  border-radius: 5px;
  padding: 6px 10px;
  font-size: 12px;
  max-width: 240px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

/* Floating Objects Layer (Charts & Macro Buttons) */
.floating-objects-layer {
  position: absolute;
  inset: 26px 14px 14px 50px;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
}

html[dir="rtl"] .floating-objects-layer {
  inset: 26px 64px 14px 0;
}

.floating-chart-card {
  position: absolute;
  pointer-events: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.floating-chart-header {
  height: 32px;
  background: var(--bg-ribbon);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
}

.floating-chart-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-main);
}

.floating-chart-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.chart-type-switcher {
  font-size: 11px;
  padding: 2px 4px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-panel);
  color: var(--text-main);
}

.chart-delete-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 5px;
}

.chart-delete-btn:hover {
  color: #dc2626;
}

.floating-chart-body {
  flex: 1;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--brand-primary) 50%);
}

html[dir="rtl"] .floating-resize-handle {
  right: auto;
  left: 0;
  cursor: nesw-resize;
  background: linear-gradient(225deg, transparent 50%, var(--brand-primary) 50%);
}

.floating-macro-btn {
  position: absolute;
  pointer-events: auto;
  background: var(--brand-primary);
  color: #ffffff;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.floating-macro-btn:hover {
  background: var(--brand-dark);
}

.macro-btn-del {
  opacity: 0.65;
  font-size: 11px;
  padding-left: 6px;
}

.macro-btn-del:hover {
  opacity: 1;
}

/* Virtual Scrollbars */
.v-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  bottom: 14px;
  background: var(--bg-ribbon);
  border-left: 1px solid var(--border-color);
  z-index: 25;
}

.v-scroll-thumb {
  width: 10px;
  margin-left: 1px;
  background: #94a3b8;
  border-radius: 5px;
  cursor: pointer;
}

.v-scroll-thumb:hover {
  background: #64748b;
}

.h-scrollbar {
  position: absolute;
  left: 0;
  right: 14px;
  bottom: 0;
  height: 14px;
  background: var(--bg-ribbon);
  border-top: 1px solid var(--border-color);
  z-index: 25;
}

.h-scroll-thumb {
  height: 10px;
  margin-top: 1px;
  background: #94a3b8;
  border-radius: 5px;
  cursor: pointer;
}

.h-scroll-thumb:hover {
  background: #64748b;
}

/* ==================== SHEET TABS & FOOTER STATUS BAR ==================== */
.excel-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sheet-tabs-bar {
  height: 29px;
  background: var(--bg-ribbon);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
}

.add-sheet-btn {
  width: 24px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-panel);
  color: var(--text-main);
  font-weight: 700;
  cursor: pointer;
}

.add-sheet-btn:hover {
  background: var(--brand-light);
  color: var(--brand-primary);
}

.sheet-tabs-list {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
}

.sheet-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
}

.sheet-tab.active {
  background: var(--bg-panel);
  color: var(--brand-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--brand-primary);
}

.sheet-tab-close {
  font-size: 13px;
  opacity: 0.55;
}

.sheet-tab-close:hover {
  opacity: 1;
  color: #dc2626;
}

.status-bar {
  height: 25px;
  background: var(--brand-dark);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 11.5px;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stat-pill {
  opacity: 0.92;
}

.stat-pill-bold {
  font-weight: 700;
  color: #bbf7d0;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zoom-controls input[type="range"] {
  width: 80px;
  cursor: pointer;
}

/* ==================== CONTEXT MENU & AUTOFILTER POPUP ==================== */
.context-menu {
  position: fixed;
  z-index: 100;
  width: 300px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
}

.ctx-item {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  text-align: start;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 6px;
}
.ctx-item > [data-i18n] { grid-column: 2; }
.ctx-item > [data-i18n]:last-child { grid-column: 2 / -1; }
.ctx-item > .ctx-shortcut { grid-column: 3; white-space: nowrap; direction: ltr; }

.ctx-item:hover {
  background: var(--brand-light);
}

.ctx-shortcut {
  color: var(--text-muted);
  font-size: 11px;
}

.ctx-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 4px 0;
}

.autofilter-popup {
  position: fixed;
  z-index: 95;
  width: 300px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.af-header {
  font-weight: 700;
  font-size: 12.5px;
}

.af-sort-btns {
  display: flex;
  gap: 4px;
}

.af-btn {
  flex: 1;
  padding: 4px;
  font-size: 11px;
  border: 1px solid var(--border-color);
  background: var(--bg-app);
  color: var(--text-main);
  border-radius: 4px;
  cursor: pointer;
}

.af-search {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 12px;
  background: var(--bg-app);
  color: var(--text-main);
}

.af-list {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.af-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  min-height: 30px;
  padding: 4px 6px;
}

.af-item span { overflow-wrap: anywhere; min-width: 0; }
.af-item input { flex-shrink: 0; accent-color: var(--brand-primary); }
.autofilter-popup :is(button,input):focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.af-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

/* ==================== MODALS ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-lg {
  max-width: 640px;
}

.modal-xl {
  max-width: 860px;
}

.modal-header {
  padding: 12px 16px;
  background: var(--brand-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 14px;
  font-weight: 700;
}

.modal-close {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

.modal-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 75vh;
  overflow-y: auto;
}

.modal-footer {
  padding: 10px 16px;
  background: var(--bg-ribbon);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
}

.modal-input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12.5px;
  background: var(--bg-app);
  color: var(--text-main);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-primary {
  background: var(--brand-primary);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--brand-dark);
}

.btn-secondary {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  cursor: pointer;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11.5px;
}

/* Function Wizard List */
.fx-functions-list {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.fx-wiz-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}

.fx-wiz-item:hover {
  background: var(--brand-light);
}

.fx-wiz-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fx-wiz-badge {
  font-size: 10.5px;
  background: var(--bg-ribbon);
  padding: 2px 7px;
  border-radius: 99px;
}

.fx-wiz-syn {
  font-family: monospace;
  font-size: 11.5px;
  color: var(--brand-primary);
  margin-top: 2px;
}

.fx-wiz-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Macro Studio IDE */
.macro-studio-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 14px;
  min-height: 400px;
}

.macro-sidebar {
  border-right: 1px solid var(--border-color);
  padding-right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.macro-sidebar-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.macro-saved-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.macro-list-item {
  padding: 8px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  background: var(--bg-app);
}

.macro-list-item.active {
  border-color: var(--brand-primary);
  background: var(--brand-light);
}

.macro-badge {
  font-size: 10px;
  background: var(--brand-primary);
  color: #ffffff;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 5px;
}

.macro-desc-small {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.macro-editor-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.macro-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.macro-code-textarea {
  flex: 1;
  min-height: 290px;
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 12px;
  background: #0f172a;
  color: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  resize: none;
}

.macro-api-help {
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-app);
  padding: 8px;
  border-radius: 6px;
}

.macro-api-help code {
  background: var(--bg-ribbon);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: monospace;
}

/* ==================== TOAST NOTIFICATIONS ==================== */
.toast-container {
  position: fixed;
  bottom: 34px;
  right: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 10px 16px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease;
  max-width: 420px;
}

.toast-info { background: #1e293b; }
.toast-success { background: #15803d; }
.toast-warning { background: #d97706; }
.toast-error { background: #dc2626; }
.toast-hide { opacity: 0; transform: translateY(10px); }

/* ==================== INTERACTIVE ACADEMY DRAWER & CATALOG ==================== */
.ribbon-tab-academy:not(.active) {
  color: #e0f2fe;
}

.academy-ribbon-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--brand-light);
  color: var(--brand-primary);
  font-size: 11.5px;
  font-weight: 700;
  margin-inline-start: 4px;
}

body.theme-dark .academy-ribbon-badge {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

.academy-drawer {
  width: 356px;
  max-width: 44vw;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-inline-start: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 20;
}

.academy-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-ribbon);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.academy-mode-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand-primary);
}

body.theme-dark .academy-mode-pill {
  color: #86efac;
}

.academy-exit-btn {
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.academy-exit-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.academy-drawer-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  user-select: text;
}

.academy-lesson-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.academy-lesson-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.academy-lesson-head h3 {
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-main);
}

.academy-concept {
  font-size: 12.5px;
  line-height: 1.48;
  color: var(--text-muted);
}

.academy-syntax {
  background: var(--bg-ribbon);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 7px 10px;
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 11.5px;
  color: var(--brand-primary);
  overflow-x: auto;
  user-select: text;
}

body.theme-dark .academy-syntax {
  color: #86efac;
}

.academy-video-box video {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: #000000;
}

.academy-steps-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.academy-step-tab {
  flex: 1;
  min-width: 76px;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--bg-app);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.academy-step-tab.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

.academy-step-tab.done:not(.active) {
  border-color: #16a34a;
  color: #15803d;
}

body.theme-dark .academy-step-tab.done:not(.active) {
  color: #86efac;
}

.academy-task-box {
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.academy-target-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.academy-target-chip {
  background: var(--brand-light);
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: "JetBrains Mono", Consolas, Monaco, monospace;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

body.theme-dark .academy-target-chip {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
  border-color: #22c55e;
}

.academy-prompt {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-main);
}

.academy-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.academy-hints-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.academy-hint-item {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-main);
}

.academy-feedback {
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  line-height: 1.45;
}

.academy-feedback.feedback-ok {
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.45);
}

.academy-feedback.feedback-err {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.4);
}

/* Catalog Modal */
.academy-catalog-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.academy-catalog-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.academy-safe-note {
  color: var(--text-muted);
  font-size: 12px;
}

.academy-track-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.academy-pill {
  background: var(--bg-app);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
}

.academy-pill.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
  font-weight: 600;
}

.academy-lessons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 10px;
}

.academy-lesson-card {
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s;
}

.academy-lesson-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

.academy-lesson-card:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

.academy-lesson-card.completed {
  border-color: #16a34a;
}

.academy-lesson-card.current {
  box-shadow: 0 0 0 2px var(--brand-primary);
}

.academy-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.academy-track-tag {
  font-size: 11px;
  color: var(--text-muted);
}

.academy-tier-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
}

.academy-tier-badge.tier-free {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

body.theme-dark .academy-tier-badge.tier-free {
  color: #86efac;
}

.academy-tier-badge.tier-pro {
  background: rgba(217, 119, 6, 0.16);
  color: #b45309;
}

body.theme-dark .academy-tier-badge.tier-pro {
  color: #fcd34d;
}

.academy-card-title {
  font-size: 13.5px;
  color: var(--text-main);
}

.academy-card-desc {
  font-size: 12px;
  line-height: 1.42;
  color: var(--text-muted);
  flex: 1;
}

.academy-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.academy-card-meta code {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--brand-primary);
}

body.theme-dark .academy-card-meta code {
  color: #86efac;
}

.academy-pro-banner {
  background: rgba(217, 119, 6, 0.12);
  border: 1px solid rgba(217, 119, 6, 0.45);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#print-root {
  display: none;
}

@media print {
  @page {
    margin: 12mm;
  }
  body > *:not(#print-root) {
    display: none !important;
  }
  body {
    background: #ffffff !important;
    overflow: visible !important;
    height: auto !important;
  }
  #print-root {
    display: block;
    font-family: Calibri, "Segoe UI", sans-serif;
    font-size: 11pt;
    color: #000000;
  }
  .print-title {
    font-size: 12pt;
    margin: 0 0 8px;
  }
  .print-table {
    border-collapse: collapse;
    table-layout: fixed;
  }
  .print-table td {
    padding: 2px 4px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .print-table.print-grid td {
    border: 1px solid #d4d4d4;
  }
  .print-table tr {
    break-inside: avoid;
  }
  .print-chart {
    display: block;
    max-width: 100%;
    margin-top: 12px;
    break-inside: avoid;
  }
}

/* Account forms use the browser's modal focus handling and keep the sheet intact. */
.account-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-sizing: border-box; padding: 24px; border: 1px solid var(--border-color, #d4d8df); border-radius: 14px; background: var(--bg-panel); color: var(--text-main); margin: auto; overflow: auto; user-select: text; box-shadow: 0 20px 70px #0004; }
.account-dialog::backdrop { background: #11182788; }
.account-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-block-end:20px; }
.account-header h2 { font-size:20px; margin:0; }
.account-dialog button { cursor:pointer; font:inherit; border-radius:7px; padding:9px 13px; border:1px solid #b9c0ca; background:transparent; color:inherit; }
.account-dialog button:disabled { opacity:.6; cursor:wait; }
.account-dialog button:focus-visible, .account-dialog input:focus-visible { outline:3px solid #238c62; outline-offset:2px; }
.account-modes { display:flex; gap:8px; margin-block-end:20px; }
.account-modes button { flex:1; }
.account-modes button[aria-pressed="true"] { border-color:#167447; font-weight:700; background:#16804c12; }
#account-form { display:flex; flex-direction:column; gap:9px; }
#account-form label { font-weight:600; }
#account-form input { min-width:0; padding:11px; border:1px solid #aeb7c3; border-radius:7px; font:inherit; background:inherit; color:inherit; margin-block-end:7px; }
.account-dialog .account-primary { background:#167447; color:white; border-color:#167447; margin-block-start:8px; }
.account-note { font-size:12px; line-height:1.6; opacity:.8; margin-block:12px 0; }
#account-status { font-size:13px; line-height:1.5; }
#account-status:empty { display:none; }
#account-email-display { overflow-wrap:anywhere; }
.account-plan { font-weight:700; }
#account-recovery-form { display:flex; flex-direction:column; gap:9px; }
#account-recovery-form input { min-width:0; padding:11px; border:1px solid var(--border-color); border-radius:7px; font:inherit; background:inherit; color:inherit; }
#account-recovery-form label { font-weight:600; }
#account-forgot, #account-back { margin-block-start:14px; }
#account-verification-state { margin-block:12px; }
.account-plan.plan-pro { color:#167447; }
body.theme-dark .account-plan.plan-pro { color:#4ade80; }
.account-warn { font-size:12.5px; line-height:1.5; padding:8px 10px; border-radius:8px; background:rgba(217,119,6,.12); border:1px solid rgba(217,119,6,.45); margin-block:8px; }
.account-billing-card { display:flex; flex-direction:column; gap:8px; padding:12px; margin-block:12px; border:1px solid var(--border-color, #d4d8df); border-radius:10px; background:rgba(22,116,71,.04); }
.account-billing-card .account-primary { margin-block-start:0; }
.account-billing-actions { display:flex; flex-wrap:wrap; gap:8px; margin-block:10px; }
.account-billing-actions button { flex:1 1 140px; }
.account-admin-link { display:inline-flex; align-items:center; gap:6px; margin-block:10px 4px; padding:8px 12px; border-radius:8px; border:1px solid #167447; color:#167447; text-decoration:none; font-weight:600; font-size:13px; }
body.theme-dark .account-admin-link { color:#4ade80; border-color:#22c55e; }
.account-admin-link:hover { background:#16804c14; }
.account-lifecycle-row { display:flex; flex-direction:column; gap:8px; margin-block:14px 10px; padding-block-start:12px; border-block-start:1px solid var(--border-color, #d4d8df); }
.account-link-danger { border-color:rgba(220,38,38,.45) !important; color:#dc2626 !important; font-size:12.5px !important; }
body.theme-dark .account-link-danger { color:#f87171 !important; border-color:rgba(248,113,113,.45) !important; }
.account-delete-box { display:flex; flex-direction:column; gap:8px; padding:10px; border-radius:8px; border:1px solid rgba(220,38,38,.45); background:rgba(220,38,38,.05); }
.account-delete-box label { font-size:12.5px; font-weight:600; }
.account-delete-box input { min-width:0; padding:9px; border:1px solid var(--border-color, #aeb7c3); border-radius:6px; font:inherit; background:inherit; color:inherit; }
.account-inline-btns { display:flex; gap:8px; }
.account-inline-btns button { flex:1; }
.account-dialog .account-danger { background:#dc2626; color:#fff; border-color:#dc2626; font-weight:600; }
.account-legal-links { display:flex; align-items:center; justify-content:center; gap:8px; margin-block-start:12px; font-size:12px; opacity:.8; }
.account-legal-links a { color:inherit; text-decoration:underline; }
.academy-cert-name-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.academy-cert-name-row label { font-size:12.5px; font-weight:600; }
.academy-cert-name-row input { padding:6px 10px; border:1px solid var(--border-color, #cbd5e1); border-radius:6px; font:inherit; font-size:13px; background:var(--bg-main, #fff); color:var(--text-main, #0f172a); min-width:220px; }

/* Studio UI: shared palette, typography and surface depth from Rootree's
   feature/rootree-ai-experience configurator. Spreadsheet geometry stays in the grid. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-greek.woff2') format('woff2'); unicode-range: U+0370-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-greek-ext.woff2') format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('vendor/fonts/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@media screen {
  :root {
    --brand-primary: #2d5a3f; --brand-dark: #234631; --brand-light: #eaf1ec;
    --bg-app: #f8f7f7; --bg-ribbon: #fcfcfc; --bg-panel: #fff;
    --border-color: #e2e2e2; --border-subtle: #ececec;
    --text-main: #222; --text-muted: #676767;
    --studio-ink: #222; --studio-on-ink: #fff;
    --shadow-sm: 0 1px 1px #00000005, 0 3px 3px #00000005, 0 6px 3px #00000003;
    --shadow-lg: 0 38px 38px #0000000f, 0 10px 21px #00000012;
  }
  body.theme-blue { --brand-light: #edf2fb; }
  body.theme-dark {
    --bg-app:#191a1b; --bg-ribbon:#202123; --bg-panel:#262729;
    --text-main:#f1f1f1; --text-muted:#b2b4b6; --border-color:#414244; --border-subtle:#343537;
    --brand-primary:#8fbc9e; --brand-dark:#2d5a3f; --brand-light:#2b3930;
    --studio-ink:#e8ebe9; --studio-on-ink:#191a1b;
  }
  html, body { font-family:'Inter',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
  button, input, select, textarea { font-family:inherit; }
  button, a, select, input { -webkit-tap-highlight-color:transparent; }
  button { transition:background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; }
  :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--brand-primary); outline-offset:3px; }
  .excel-titlebar { height:auto; min-height:58px; gap:12px; padding:10px 18px; background:var(--bg-panel); color:var(--text-main); border-bottom:1px solid var(--border-subtle); flex-wrap:wrap; }
  .titlebar-left { flex:1 1 530px; min-width:0; gap:8px; }
  .titlebar-right { flex-wrap:wrap; gap:6px; }
  .excel-logo { font-size:15px; letter-spacing:-.5px; margin-inline-end:10px; white-space:nowrap; }
  .logo-icon { width:29px; height:29px; border-radius:9px; color:#fff; background:#2d5a3f; box-shadow:inset 0 1px 0 #ffffff33; }
  .qat-divider { background:var(--border-subtle); margin-inline:3px; }
  .qat-btn, .qat-pill-btn { background:transparent; color:var(--text-muted); border:1px solid transparent; border-radius:8px; padding:7px 9px; white-space:nowrap; }
  .qat-btn:hover, .qat-pill-btn:hover { background:var(--bg-app); color:var(--text-main); }
  .qat-pill-accent { background:var(--bg-app); border-color:var(--border-subtle); font-weight:500; }
  #btn-account { background:var(--studio-ink); color:var(--studio-on-ink); border-color:var(--studio-ink); border-radius:9px; padding:8px 15px; }
  #btn-account:hover { filter:brightness(1.15); }
  .workbook-title-input { background:transparent; color:var(--text-main); border:1px solid transparent; border-radius:7px; min-width:100px; width:220px; font-weight:500; }
  .workbook-title-input:hover, .workbook-title-input:focus { background:var(--bg-app); border-color:var(--border-color); color:var(--text-main); }
  .autosave-badge { background:var(--brand-light); color:var(--brand-primary); font-size:10px; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .theme-select { background:var(--bg-app); color:var(--text-main); border:1px solid var(--border-subtle); border-radius:8px; min-height:31px; padding:4px 8px; }
  .ribbon-tabs-bar { height:42px; gap:5px; padding:5px 18px; background:var(--bg-panel); overflow-x:auto; }
  .ribbon-tab-btn { flex-shrink:0; border-radius:7px; padding:7px 13px; color:var(--text-muted); font-size:12px; }
  .ribbon-tab-btn:hover { background:var(--bg-app); color:var(--text-main); }
  .ribbon-tab-btn.active, body.theme-dark .ribbon-tab-btn.active { background:var(--brand-light); color:var(--brand-primary); font-weight:600; }
  .ribbon-container { height:94px; padding:7px 18px; border-bottom:1px solid var(--border-subtle); box-shadow:0 8px 16px -12px #00000020; z-index:2; }
  .ribbon-group { border-color:var(--border-subtle); padding-inline-end:14px; }
  .ribbon-group-title { font-size:9px; letter-spacing:.025em; opacity:.8; }
  .rb-btn, .rb-btn-sm, .rb-icon-btn { border-color:transparent; border-radius:7px; background:transparent; }
  .rb-btn:hover, .rb-btn-sm:hover, .rb-icon-btn:hover { border-color:var(--border-subtle); background:var(--bg-app); }
  .rb-btn-large { height:60px; padding:7px 12px; gap:7px; }
  .rb-btn-large span { font-size:11px; font-weight:500; }
  .rb-icon-btn { height:27px; min-width:28px; }
  .rb-icon-btn.active { border-color:var(--border-color); background:var(--brand-light); }
  .rb-select { height:28px; border-radius:7px; border-color:var(--border-subtle); padding-inline:8px; background:var(--bg-app); }
  #font-family-select { min-width:125px; }
  .color-picker-lbl { height:28px; border-radius:7px; border-color:var(--border-subtle); gap:6px; padding:3px 7px; }
  .color-picker-lbl input[type=color] { width:20px; height:20px; padding:0; border-radius:5px; }
  input[type=color]::-webkit-color-swatch-wrapper { padding:2px; }
  input[type=color]::-webkit-color-swatch { border:1px solid #00000018; border-radius:4px; }
  .formula-bar { background:var(--bg-panel); border-color:var(--border-subtle); }
  .floating-chart-card { border-radius:14px; border-color:var(--border-subtle); box-shadow:var(--shadow-lg); }
  .floating-chart-header { height:38px; padding-inline:14px; background:var(--bg-panel); }
  .floating-chart-title { font-weight:600; }
  .chart-type-switcher { border-radius:6px; background:var(--bg-app); border-color:transparent; padding:4px 7px; }
  .sheet-tabs-bar { height:39px; padding:5px 12px; background:var(--bg-panel); }
  .sheet-tab { border:1px solid transparent; border-radius:7px; padding:6px 12px; background:transparent; font-size:11px; }
  .sheet-tab.active { background:var(--brand-light); border:1px solid transparent; color:var(--brand-primary); font-weight:600; }
  .add-sheet-btn { border:0; background:var(--bg-app); border-radius:6px; width:27px; height:27px; }
  .status-bar { height:27px; background:var(--bg-app); color:var(--text-muted); border-top:1px solid var(--border-subtle); font-size:10px; }
  .stat-pill-bold { color:var(--brand-primary); }
  .modal-backdrop { background:#12121255; backdrop-filter:blur(5px); padding:24px; }
  .modal-card { border:1px solid var(--border-subtle); border-radius:20px; box-shadow:var(--shadow-lg); max-height:calc(100dvh - 48px); }
  .modal-xl { max-width:1080px; }
  .modal-header { padding:20px 24px; background:var(--bg-panel); color:var(--text-main); border-bottom:1px solid var(--border-subtle); }
  .modal-header h3 { font-size:18px; letter-spacing:-.5px; font-weight:600; }
  .modal-close { width:30px; height:30px; border-radius:50%; color:var(--text-muted); background:var(--bg-app); }
  .modal-close:hover { background:var(--border-subtle); }
  .modal-body { padding:24px; gap:16px; min-height:0; }
  .modal-footer { padding:14px 24px; background:var(--bg-panel); }
  .modal-input { padding:10px 12px; border-radius:9px; background:var(--bg-app); }
  .btn-primary { background:var(--studio-ink); color:var(--studio-on-ink); border-radius:8px; padding:10px 16px; font-weight:500; }
  .btn-primary:hover { background:var(--studio-ink); filter:brightness(1.2); }
  .btn-secondary { border-radius:8px; padding:10px 16px; background:var(--bg-app); border-color:transparent; }
  .btn-secondary:hover { border-color:var(--border-color); }
  .btn-sm { padding:7px 11px; }
  .academy-catalog-top { gap:16px; }
  .academy-track-pills { gap:6px; padding-block:6px; }
  .academy-pill { border-color:transparent; background:var(--bg-app); padding:8px 12px; font-size:11px; }
  .academy-pill.active { background:var(--studio-ink); border-color:var(--studio-ink); color:var(--studio-on-ink); }
  .academy-lessons-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
  .academy-lesson-card { position:relative; background:var(--bg-panel); border:1px solid var(--border-subtle); padding:20px; border-radius:14px; gap:12px; transition:box-shadow 160ms ease,border-color 160ms ease; }
  .academy-lesson-card:hover { transform:none; border-color:var(--brand-primary); box-shadow:var(--shadow-sm); }
  .academy-lesson-card.current { box-shadow:inset 0 0 0 1px var(--brand-primary); }
  .academy-card-top { align-items:flex-start; gap:12px; }
  .academy-track-tag { font-size:10px; line-height:1.5; }
  .academy-tier-badge { flex-shrink:0; white-space:nowrap; font-size:10px; font-weight:500; padding:4px 8px; }
  .academy-tier-badge.tier-pro { color:#69503a; background:#f3eee7; }
  .academy-card-title { font-size:15px; line-height:1.4; font-weight:600; letter-spacing:-.3px; }
  .academy-card-desc { font-size:12px; line-height:1.65; }
  .academy-card-meta { gap:8px; padding-top:10px; border-top:1px solid var(--border-subtle); font-size:10px; }
  .academy-card-meta code { background:var(--bg-app); border:0; padding:4px 6px; font-size:10px; white-space:normal; overflow-wrap:anywhere; }
  .academy-pro-banner { background:var(--bg-app); border:1px solid var(--border-subtle); border-radius:14px; padding:20px; gap:10px; }
  .academy-pro-banner button { align-self:flex-start; width:auto; }
  .academy-task-box, .academy-hint-item { border-radius:12px; }
  .account-dialog { width:min(440px,calc(100vw - 32px)); padding:32px; border:1px solid var(--border-subtle); border-radius:22px; box-shadow:var(--shadow-lg); }
  .account-dialog::backdrop { background:#12121255; backdrop-filter:blur(5px); }
  .account-header { margin-block-end:24px; }
  .account-header h2 { font-size:25px; font-weight:600; letter-spacing:-.8px; }
  .account-dialog button { border-color:var(--border-subtle); border-radius:9px; padding:10px 14px; font-size:13px; }
  .account-header button { padding:0; width:30px; height:30px; border-radius:50%; border:0; background:var(--bg-app); color:var(--text-muted); }
  .account-modes { padding:4px; background:var(--bg-app); border-radius:11px; gap:4px; margin-block-end:24px; }
  .account-modes button { border:0; color:var(--text-muted); font-size:12px; padding:9px; }
  .account-modes button[aria-pressed=true] { background:var(--bg-panel); color:var(--text-main); box-shadow:var(--shadow-sm); font-weight:600; }
  #account-form, #account-recovery-form { gap:9px; }
  #account-form label, #account-recovery-form label { font-size:12px; font-weight:500; }
  #account-form input, #account-recovery-form input { height:44px; border-color:var(--border-color); background:var(--bg-app); border-radius:9px; padding:11px 13px; margin-bottom:10px; }
  .account-dialog button:focus-visible, .account-dialog input:focus-visible { outline:2px solid var(--brand-primary); outline-offset:3px; }
  .account-dialog .account-primary { background:var(--studio-ink); color:var(--studio-on-ink); border-color:var(--studio-ink); min-height:43px; font-weight:500; }
  #account-forgot, #account-back { border:0; background:transparent; color:var(--text-muted); padding:6px 0; font-size:12px; }
  #account-forgot:hover, #account-back:hover { color:var(--text-main); text-decoration:underline; }
  .account-note { font-size:11px; line-height:1.7; color:var(--text-muted); opacity:1; }
  .account-note a { color:inherit; text-underline-offset:3px; }
  .account-billing-card { border-radius:12px; padding:16px; background:var(--bg-app); }
  .context-menu { border-radius:12px; padding:6px; box-shadow:var(--shadow-lg); border-color:var(--border-subtle); }
}
@media screen and (max-width:1100px) {
  .excel-titlebar { padding:10px 12px; gap:8px; }
  .titlebar-left { flex-basis:100%; }
  .titlebar-right { width:100%; }
  .ribbon-container { padding-inline:10px; }
  .ribbon-tabs-bar { padding-inline:10px; }
}
@media screen and (max-width:600px) {
  .excel-titlebar { padding:8px; }
  .titlebar-left { gap:3px; }
  .qat-btn span, .qat-divider, .autosave-badge { display:none; }
  .workbook-title-input { flex:1; width:80px; }
  .titlebar-right { flex-wrap:nowrap; overflow-x:auto; padding-bottom:3px; }
  .titlebar-right > * { flex-shrink:0; }
  .ribbon-tabs-bar { height:39px; }
  .ribbon-tab-btn { padding:7px 10px; }
  .modal-backdrop { padding:10px; }
  .modal-card { max-height:calc(100dvh - 20px); border-radius:16px; }
  .modal-body { padding:16px; }
  .modal-header { padding:16px; }
  .modal-header h3 { font-size:16px; }
  .academy-lessons-grid { grid-template-columns:1fr; }
  .account-dialog { padding:24px; }
  .status-right { gap:8px; }
  .stat-pill { display:none; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important; } }
@media screen {
  .ribbon-tab-academy:not(.active) { color:var(--text-muted); }
}
@media screen {
  .studio-color-trigger { display:inline-flex; align-items:center; gap:7px; height:28px; border:1px solid var(--border-subtle); border-radius:7px; background:var(--bg-panel); color:var(--text-main); padding:3px 8px; cursor:pointer; font-size:11px; }
  .studio-color-trigger:hover { background:var(--bg-app); }
  .studio-color-chip { width:16px; height:16px; border-radius:4px; border:1px solid #00000020; }
  .studio-color-popover { position:fixed; margin:0; width:260px; padding:18px; border:1px solid var(--border-subtle); border-radius:15px; background:var(--bg-panel); color:var(--text-main); box-shadow:var(--shadow-lg); user-select:none; }
  .studio-color-heading { font-weight:600; font-size:12px; margin-bottom:16px; }
  .studio-color-swatches { display:grid; grid-template-columns:repeat(8,1fr); gap:6px; }
  .studio-color-swatches button { width:22px; height:22px; border:1px solid #00000018; border-radius:6px; cursor:pointer; }
  .studio-color-swatches button[aria-pressed=true] { outline:2px solid var(--brand-primary); outline-offset:2px; }
  .studio-color-custom { display:flex; align-items:center; gap:10px; border-top:1px solid var(--border-subtle); margin-top:18px; padding-top:14px; }
  .studio-color-custom input[type=color] { width:36px; height:34px; padding:0; border:0; background:none; cursor:pointer; }
  .studio-color-custom input[type=text] { width:100%; min-width:0; background:var(--bg-app); border:1px solid var(--border-subtle); color:var(--text-main); border-radius:7px; padding:8px 10px; font:12px ui-monospace,monospace; }
}
@media screen {
  .academy-track-pills { flex-wrap:nowrap; overflow-x:auto; padding-bottom:10px; scrollbar-width:thin; }
  .academy-track-pills .academy-pill { flex-shrink:0; }
  .studio-font-trigger { min-width:125px; height:28px; text-align:start; border:1px solid var(--border-subtle); background:var(--bg-app); color:var(--text-main); border-radius:7px; padding:4px 10px; font-size:11px; cursor:pointer; }
  .studio-font-panel { padding:8px; }
  .studio-font-panel button { display:block; width:100%; padding:10px 12px; border:0; border-radius:7px; color:var(--text-main); background:transparent; text-align:start; font-size:15px; cursor:pointer; }
  .studio-font-panel button:hover { background:var(--bg-app); }
  .studio-font-panel button[aria-pressed=true] { background:var(--brand-light); color:var(--brand-primary); }
}
@media screen {
  .studio-icon { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; vertical-align:middle; }
  .rb-btn-large > .studio-icon { width:21px; height:21px; color:var(--text-muted); }
  .qat-pill-btn, .ribbon-tab-btn { align-items:center; gap:6px; }
  .qat-pill-btn > .studio-icon, .ribbon-tab-btn > .studio-icon { margin-inline-end:4px; }
}

/* Shared application dialogs: no blocking browser alerts or prompts. */
.app-dialog {
  margin: auto; inset: 0;
  width: min(460px, calc(100vw - 40px)); max-height: calc(100dvh - 48px);
  box-sizing: border-box; padding: 30px; overflow: auto;
  border: 1px solid #dce5df; border-radius: 24px;
  background: #fbfcfa; color: #203b2c;
  box-shadow: 0 28px 90px #102b2940;
  font: 14px/1.6 Inter, system-ui, sans-serif;
}
.app-dialog::backdrop { background: #152c2759; backdrop-filter: blur(5px); }
.app-dialog-brand { font-size: 10px; letter-spacing: .18em; font-weight: 750; color: #678273; }
.app-dialog h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.035em; margin: 12px 0; }
.app-dialog p { white-space: pre-wrap; overflow-wrap: anywhere; color: #59695e; margin: 0 0 24px; }
.app-dialog input, .app-dialog textarea { width: 100%; box-sizing: border-box; border: 1px solid #cedbd1; background: #fff; color: #203b2c; border-radius: 12px; padding: 12px 14px; font: inherit; resize: vertical; }
.app-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.app-dialog button { padding: 10px 18px; border-radius: 12px; border: 1px solid #d5dfd8; background: #f1f5f0; color: #345240; font: inherit; font-weight: 650; cursor: pointer; }
.app-dialog button:hover { filter: brightness(.95); }
.app-dialog button.app-dialog-primary { background: #2d5a3f; color: #fff; border-color: #2d5a3f; }
.app-dialog button.app-dialog-danger { background: #a23f38; border-color: #a23f38; }
.app-dialog :focus-visible { outline: 3px solid #9cbea8; outline-offset: 3px; }
.account-form-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 20px 0 8px; }
.account-dialog .account-form-links button { border: 0; background: transparent; border-radius: 6px; color: #2d5a3f; padding: 6px 0; font-size: 14px; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }

.fn-ac-item[aria-selected="true"] { background: #eaf1ec; box-shadow: inset 3px 0 #2d5a3f; }

/* Home ribbon: shared control rows and a single caption baseline. */
#ribbon-home .ribbon-group {
  display: grid;
  grid-template-rows: 64px 12px;
  row-gap: 4px;
  align-content: start;
  justify-content: normal;
}
#ribbon-home .ribbon-group > .ribbon-group-row {
  align-items: stretch;
  min-height: 0;
}
#ribbon-home .ribbon-col-stack {
  height: 64px;
  display: grid;
  grid-template-rows: repeat(2, 30px);
  gap: 4px;
  align-content: start;
}
#ribbon-home .ribbon-group:first-child .ribbon-col-stack {
  grid-template-rows: repeat(3, 20px);
  gap: 2px;
}
#ribbon-home .ribbon-inline-row { height: 30px; }
#ribbon-home .rb-btn-sm,
#ribbon-home .rb-icon-btn,
#ribbon-home .rb-select,
#ribbon-home .studio-font-trigger,
#ribbon-home .studio-color-trigger { height: 30px; }
#ribbon-home .ribbon-group:first-child .rb-btn-sm { height: 20px; }
#ribbon-home .rb-btn-large { height: 64px; }
#ribbon-home .ribbon-group-title { margin-top: 0; line-height: 12px; align-self: end; }

.app-dialog-presets{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.app-dialog-presets button{font:inherit;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-panel);color:var(--text-main);padding:8px 12px;cursor:pointer}.app-dialog-presets button:hover{background:var(--brand-light)}

/* Consistent, high-contrast close controls in dialogs and review panels. */
:is(#account-close,#plans-close,#files-close,.modal-close,.shared-dialog .shared-close) {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  border:1px solid var(--border-color,#cbd5d1);
  border-radius:10px;
  background:var(--bg-panel,#fff);
  color:var(--text-main,#222);
  opacity:1;
  font-size:0;
  cursor:pointer;
}
:is(#account-close,#plans-close,#files-close,.modal-close,.shared-dialog .shared-close)::before {
  content:"";
  width:20px;
  height:20px;
  background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
:is(#account-close,#plans-close,#files-close,.modal-close,.shared-dialog .shared-close) > svg { display:none; }
:is(#account-close,#plans-close,#files-close,.modal-close,.shared-dialog .shared-close):hover {
  color:var(--text-main,#222);
  background:var(--brand-light,#eaf1ec);
  border-color:var(--text-muted,#65746b);
}
:is(#account-close,#plans-close,#files-close,.modal-close,.shared-dialog .shared-close):focus-visible {
  outline:3px solid var(--brand-primary,#2d5a3f);
  outline-offset:3px;
}

.ai-dialog{position:fixed;inset:80px 16px auto auto;margin:0;width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 100px);overflow:auto;padding:22px;border:1px solid var(--border-color);border-radius:18px;background:var(--bg-panel);color:var(--text-main);box-shadow:var(--shadow-lg);z-index:95;font:13px/1.5 system-ui,sans-serif}.ai-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.ai-dialog h2{font-size:20px;margin:0}.ai-dialog>p{color:var(--text-muted)}.ai-log{max-height:240px;overflow:auto}.ai-log p{white-space:pre-wrap;padding:10px;border-radius:10px;background:var(--bg-app)}.ai-log .ai-user{background:var(--brand-light)}.ai-dialog textarea{width:100%;resize:vertical;font:inherit;padding:12px;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-app);color:var(--text-main)}.ai-dialog button{cursor:pointer}.ai-dialog form>button,.ai-preview button{font:inherit;padding:10px 14px;margin:8px 8px 0 0;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-app);color:var(--text-main)}.ai-dialog button.ai-primary{background:var(--brand-primary);color:white}.ai-dialog button:disabled{opacity:.5;cursor:default}.ai-preview{max-height:280px;overflow:auto}.ai-preview table{border-collapse:collapse;width:100%;font-size:12px}.ai-preview td{padding:7px;border-bottom:1px solid var(--border-color);overflow-wrap:anywhere;max-width:180px}[dir=rtl] .ai-dialog{inset-inline-start:auto;inset-inline-end:16px}
.ai-tools {display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.ai-balance{font-size:12px;font-weight:600}.ai-file{display:flex;align-items:center;gap:8px;font-size:12px}.ai-file:empty{display:none}.ai-dialog th{text-align:start;font-size:11px;color:var(--muted,#667);padding:6px}.ai-dialog td{overflow-wrap:anywhere}
.ai-tools button{display:inline-flex;align-items:center;gap:8px;font:inherit;padding:9px 12px;border:1px solid var(--border-color);border-radius:9px;background:var(--bg-app);color:var(--text-main)}.ai-tools button:hover{background:var(--brand-light)}.ai-tools svg{width:18px;height:18px;flex:none}.ai-file{align-items:flex-start;padding:10px;border:1px solid var(--border-color);border-radius:10px}.ai-file details{min-width:0;flex:1}.ai-file summary{cursor:pointer}.ai-file pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:140px;overflow:auto;font:12px/1.4 monospace}.ai-file>button{border:0;background:transparent;color:var(--text-main);font-size:20px;line-height:1;min-width:28px;min-height:28px}.ai-balance{padding-block:8px}.ai-dialog .ai-log:empty{display:none}

/* RooTree-inspired assistant composer: one surface, integrated icon controls. */
.ai-dialog .ai-composer{padding:8px;margin-top:14px;border:1px solid var(--border-color);border-radius:20px;background:var(--bg-app);box-shadow:0 3px 12px #18382d08;transition:border-color .18s,box-shadow .18s}
.ai-dialog .ai-composer:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 14%,transparent)}
.ai-dialog .ai-composer textarea{display:block;min-height:86px;max-height:180px;resize:vertical;padding:10px 12px;border:0;border-radius:12px;background:transparent;outline:none;box-shadow:none;line-height:1.6}
.ai-dialog .ai-composer textarea::placeholder{color:var(--text-muted);opacity:.85}
.ai-dialog .ai-tools{display:flex;align-items:center;gap:6px;margin:4px 0 0;padding:4px;flex-wrap:nowrap}
.ai-dialog .ai-tools button{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;margin:0;border:0;border-radius:12px;background:transparent;color:var(--text-muted);transition:background .18s,color .18s,transform .18s}
.ai-dialog .ai-tools button:hover{background:var(--brand-light);color:var(--brand-primary)}
.ai-dialog .ai-tools button:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
.ai-dialog .ai-tools svg{width:20px;height:20px}
.ai-dialog .ai-tools button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ai-dialog .ai-tools .ai-send{margin-inline-start:auto;background:var(--brand-primary);color:#fff;box-shadow:0 3px 8px #18382d20}
.ai-dialog .ai-tools .ai-send:hover{background:var(--brand-primary);color:#fff;transform:translateY(-1px)}
.ai-dialog .ai-tools button[aria-pressed=true]{background:var(--brand-light);color:var(--brand-primary);box-shadow:inset 0 0 0 1px var(--brand-primary)}
.ai-dialog .ai-composer .ai-file:not(:empty){margin:4px 4px 8px;padding:10px;background:var(--bg-panel);border-radius:12px}
.ai-dialog .ai-balance{padding:0;font-size:11px;color:var(--text-muted);font-weight:500}
.ai-dialog [role=status]:empty{display:none}
@media(prefers-reduced-motion:reduce){.ai-dialog .ai-composer,.ai-dialog .ai-tools button{transition:none}}
.ai-launcher{position:fixed;right:24px;bottom:58px;z-index:96;width:64px;height:64px;display:flex;align-items:center;justify-content:center;gap:3px;border:2px solid #d7f7c6;border-radius:50%;background:linear-gradient(145deg,#416d50,#153e31);color:#fff;box-shadow:0 7px 24px #163f3545,0 0 0 5px #83b67c20;cursor:grab;touch-action:none;user-select:none;font:700 14px/1 system-ui,sans-serif;transition:box-shadow .18s}
.ai-launcher[hidden]{display:none}.ai-launcher svg{width:25px;height:25px;flex:none}.ai-launcher:hover,.ai-launcher[aria-expanded=true]{box-shadow:0 8px 28px #163f3560,0 0 0 6px #83b67c35}.ai-launcher:focus-visible{outline:3px solid #87bc52;outline-offset:5px}.ai-launcher.is-dragging{cursor:grabbing;box-shadow:0 12px 32px #163f3570}.ai-launcher:active{cursor:grabbing}
@media(max-width:600px){.ai-launcher{right:16px;bottom:65px}}

/* Command families follow the familiar spreadsheet ribbon hierarchy. */
.ribbon-menu-trigger svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.ribbon-menu-trigger > span::after { content:' ▾'; font-size:11px; }
.ribbon-command-menu { position:fixed; margin:0; padding:6px; min-width:230px; max-width:calc(100vw - 16px); border:1px solid var(--border-subtle); border-radius:12px; background:var(--bg-panel); color:var(--text-main); box-shadow:var(--shadow-lg); }
.ribbon-command-menu .ribbon-menu-item { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-height:38px; height:auto; padding:8px 12px; border:0; border-radius:6px; text-align:start; font-size:13px; background:transparent; color:inherit; }
.ribbon-command-menu .ribbon-menu-item svg { flex:0 0 20px; width:20px; height:20px; }
.ribbon-command-menu .ribbon-menu-item:hover,.ribbon-command-menu .ribbon-menu-item:focus-visible { background:var(--bg-app); outline:2px solid var(--border-subtle); outline-offset:-2px; }
/* Spreadsheet command menus: aligned groups and consistent density in every tab. */
.ribbon-panel .ribbon-group { align-self:stretch; }
.ribbon-panel .ribbon-group-title { text-align:center; margin-top:auto; }
.ribbon-command-menu { max-height:calc(100vh - 24px); overflow:auto; z-index:1500; }
.ribbon-command-menu [hidden],.ribbon-panel [hidden] { display:none!important; }
.ribbon-menu-trigger { flex-shrink:0; white-space:nowrap; }
.ribbon-menu-trigger.rb-btn-sm { display:inline-flex; align-items:center; gap:6px; }
.ribbon-menu-trigger.rb-btn-sm svg { width:18px; height:18px; }
.ribbon-command-menu .studio-icon { fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ribbon-command-menu .ribbon-menu-item { white-space:normal; max-width:360px; line-height:1.35; cursor:pointer; }
.ribbon-command-menu .ribbon-menu-item > span { flex:1; }
.ribbon-gallery:popover-open { display:grid; grid-template-columns:repeat(2,minmax(125px,1fr)); gap:6px; width:340px; }
.ribbon-gallery .ribbon-style-preview { background:var(--preview-bg); color:var(--preview-fg); border:1px solid #0001; min-height:52px; }
.ribbon-gallery .ribbon-style-preview:hover,.ribbon-gallery .ribbon-style-preview:focus-visible { background:var(--preview-bg); outline:2px solid var(--preview-fg); outline-offset:-3px; }
#ribbon-home .ribbon-gallery-stack { display:flex; align-items:stretch; }
#ribbon-home .ribbon-group > .ribbon-group-row { gap:6px; }
#ribbon-home #ribbon-trigger-clear { width:100%; justify-content:flex-start; }
#ribbon-home .ribbon-inline-row { gap:4px; }
#ribbon-home #ribbon-trigger-currency > span { max-width:65px; overflow:hidden; text-overflow:ellipsis; }
.ribbon-rules-dialog { width:min(660px,calc(100vw - 32px)); max-height:80vh; margin:auto; border:1px solid var(--border-subtle); border-radius:20px; padding:24px; background:var(--bg-panel); color:var(--text-main); box-shadow:var(--shadow-lg); }
.ribbon-rules-dialog::backdrop { background:#16282566; backdrop-filter:blur(4px); }
.ribbon-rules-dialog header,.ribbon-rule-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ribbon-rules-dialog h2 { font-size:20px; }
.ribbon-rules-dialog button { display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--bg-app); color:var(--text-main); border:1px solid var(--border-subtle); border-radius:8px; cursor:pointer; }
.ribbon-rules-dialog button svg { width:18px; height:18px; flex-shrink:0; }
.ribbon-rule-row { padding:14px 0; border-top:1px solid var(--border-subtle); }
.ribbon-rule-row span { overflow-wrap:anywhere; }
.ribbon-panel .ribbon-menu-trigger.rb-btn-large { width:88px; min-width:68px; padding:5px 6px; }
.ribbon-panel .ribbon-menu-trigger.rb-btn-large > span { white-space:normal; line-height:1.2; text-align:center; }
.ribbon-panel .ribbon-menu-trigger.rb-btn-large > .studio-icon { flex-shrink:0; }
.ribbon-panel .ribbon-group { padding-inline-end:10px; }
#ribbon-home .ribbon-group-row { gap:3px; }
/* Popovers default to inset:0; unset the opposite edge so RTL honors our anchor. */
.ribbon-command-menu { inset:auto; }

/* Payment stays over the live workbook, including during bank authentication. */
.embedded-checkout-dialog{position:fixed;inset:0;margin:auto;width:min(1040px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #dce3e0;border-radius:20px;background:#fff;color:#192c2c;box-shadow:0 24px 80px #0004;overflow:auto;}
.embedded-checkout-dialog::backdrop{background:#12282499;backdrop-filter:blur(4px)}
.embedded-checkout-dialog>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:#fff;border-bottom:1px solid #e4e9e7;}
.embedded-checkout-dialog h2{margin:0;font-family:inherit;font-size:20px;font-weight:600;line-height:1.3;}
.embedded-checkout-dialog>header button{width:44px;height:44px;flex:none;border:1px solid #c5d3cc;border-radius:50%;background:#f1f5f3;color:#192c2c;font-size:28px;cursor:pointer;}
.embedded-checkout-dialog>header button:focus-visible{outline:3px solid #31785b;outline-offset:2px}
.embedded-checkout-dialog>p{margin:12px 24px}.embedded-checkout-dialog>p:empty{display:none}
#modal-plans .plan-select-btn[data-select-plan="monthly"]{background:#2e5d45;color:#fff;border:2px solid #2e5d45;box-shadow:0 3px 8px #163d2926;cursor:pointer;}
#modal-plans .plan-select-btn[data-select-plan="monthly"]:hover{background:#204832;border-color:#204832;}
#modal-plans .plan-select-btn:focus-visible{outline:3px solid #559874;outline-offset:4px;}
#modal-plans .plan-select-btn:disabled{opacity:.5;cursor:wait;}

/* Connected apps and credit history stay inside the profile dialog. */
#account-plugin-connections, #account-ai-usage {
  margin-block: 12px; border: 1px solid var(--border-color, #d8dfdc);
  border-radius: 12px; overflow: hidden;
}
#account-plugin-connections summary, #account-ai-usage summary {
  cursor: pointer; padding: 12px 14px; font-weight: 600; line-height: 1.4;
  background: var(--bg-ribbon, #f5f7f6);
}
#account-plugin-connections summary:focus-visible, #account-ai-usage summary:focus-visible {
  outline: 2px solid var(--brand-primary, #2d674d); outline-offset: -3px;
}
#account-plugin-connections > div, #account-ai-usage > div {
  padding: 12px 14px; line-height: 1.5; max-height: 320px; overflow: auto;
  overflow-wrap: anywhere;
}
#account-plugin-connections p, #account-ai-usage p { margin-block: 6px; }
.account-plugin-card { padding-block: 10px; border-bottom: 1px solid var(--border-color, #d8dfdc); }
.account-plugin-card:last-child { border-bottom: 0; }
.account-plugin-card ul { padding-inline-start: 20px; margin-block: 8px; }
#account-ai-usage ul { list-style: none; padding: 0; margin: 12px 0 0; }
#account-ai-usage li { padding-block: 12px; border-top: 1px solid var(--border-color, #d8dfdc); }
#account-ai-usage small { display: block; opacity: .8; }

/* Shared dialog typography and controls, including native dialog shells. */
:is(dialog,.modal-card) {
  font: 14px/1.5 Inter, system-ui, sans-serif;
  color:var(--text-main); background:var(--bg-panel);
  border:1px solid var(--border-subtle); border-radius:20px;
}
:is(dialog,.modal-card) :is(button,input,select,textarea) { font-family:inherit; font-size:14px; line-height:1.5; }
:is(dialog,.modal-card) :is(h2,h3) { font-family:inherit; font-size:20px; line-height:1.3; font-weight:650; letter-spacing:-.025em; }
:is(dialog,.modal-card) button { min-height:36px; box-sizing:border-box; }
dialog::backdrop { background:#152c2759; backdrop-filter:blur(4px); }
.app-dialog { background:var(--bg-panel); color:var(--text-main); padding:24px; }
.app-dialog form { position:relative; }
.app-dialog h2 { padding-inline-end:44px; }
.app-dialog p { color:var(--text-muted); }
.app-dialog button { border-radius:10px; }
.app-dialog form > .dialog-close-button { position:absolute; inset-inline-end:-8px; top:-8px; }
:is(dialog,.modal-card) .dialog-close-button {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 36px; width:36px; height:36px; min-height:36px; padding:0;
  border:1px solid var(--border-subtle); border-radius:50%;
  background:var(--bg-app); color:var(--text-main); font-size:24px; cursor:pointer;
}
.dialog-close-button > span { display:none; }
:is(dialog,.modal-card) .dialog-close-button:hover { background:var(--border-subtle); }
:is(dialog,.modal-card) :focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
:is(dialog,.modal-card) :is(.modal-close,#account-close,#plans-close,#files-close,.shared-close) {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 36px; width:36px; height:36px; min-width:36px; min-height:36px;
  padding:0; border:1px solid var(--border-subtle); border-radius:50%;
  background:var(--bg-app); color:var(--text-main);
}
:is(dialog,.modal-card) :is(.btn-secondary,.app-dialog-actions > button:not(.app-dialog-primary)) {
  padding:8px 16px; border:1px solid var(--border-subtle); border-radius:10px;
  background:var(--bg-app); color:var(--text-main); font-weight:600;
}
:is(dialog,.modal-card) :is(.btn-primary,.app-dialog-primary) { border-radius:10px; padding:8px 16px; font-weight:600; }
.zoom-controls .zoom-step {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; flex:0 0 28px; padding:0;
  border:1px solid transparent; border-radius:6px;
  background:transparent; color:inherit; font:600 20px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
}
.zoom-controls .zoom-step:hover { background:var(--brand-light); border-color:var(--border-subtle); }
.zoom-controls .zoom-step:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
/* Shared RooTree-inspired color controls; RGB is the workbook color space. */
.studio-color-popover { width:292px; max-width:calc(100vw - 16px); box-sizing:border-box; max-height:calc(100dvh - 16px); overflow:auto; padding:18px; border-radius:18px; font:13px/1.4 Inter,system-ui,sans-serif; }
.color-surface { position:relative; height:155px; border-radius:12px; background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent); touch-action:none; cursor:crosshair; margin:8px 0 16px; }
.color-cursor { position:absolute; width:16px; height:16px; border:2px solid white; border-radius:50%; box-shadow:0 0 0 1px #0005,0 2px 4px #0004; transform:translate(-50%,-50%); pointer-events:none; }
.color-hue { appearance:none; display:block; width:100%; height:12px; border-radius:8px; background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red); margin:0 0 16px; cursor:pointer; direction:ltr; }
.color-hue::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border:3px solid white; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #0005; }
.color-hue::-moz-range-thumb { width:14px; height:14px; border:3px solid white; border-radius:50%; background:transparent; box-shadow:0 0 0 1px #0005; }
.studio-color-custom { border-top:0; padding:0; margin:0 0 18px; gap:8px; }
.color-preview { flex:0 0 32px; height:32px; border:1px solid #8884; border-radius:8px; }
.studio-color-custom .color-pipette { flex:0 0 34px; height:34px; display:grid; place-items:center; border:1px solid var(--border-subtle); border-radius:8px; background:var(--bg-app); color:var(--text-main); cursor:pointer; }
.color-pipette svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.studio-color-swatches button { width:100%; aspect-ratio:1; height:auto; border-radius:7px; }
.color-recent { border-top:1px solid var(--border-subtle); padding-top:12px; margin-top:14px; }
.color-recent[hidden] { display:none; }
.studio-color-popover :focus-visible { outline:2px solid var(--brand-primary); outline-offset:3px; }
/* Account/presence controls must not push the workbook header to a second row. */
.excel-titlebar { flex-wrap:nowrap; }
.excel-titlebar .titlebar-left { flex:1 1 280px; min-width:160px; }
.excel-titlebar .titlebar-right { flex:0 1 auto; width:auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
.excel-titlebar .titlebar-right > * { flex-shrink:0; }
.excel-titlebar .workbook-title-input { width:auto; min-width:60px; flex:1 1 160px; }
.excel-titlebar .autosave-badge { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
@media(max-width:1100px){.excel-titlebar .titlebar-left{flex-basis:210px}.excel-titlebar .autosave-badge{max-width:110px}.excel-titlebar .qat-divider{display:none}}
@media(max-width:700px){.excel-titlebar{overflow-x:auto}.excel-titlebar .titlebar-left{flex:0 0 200px}.excel-titlebar .titlebar-right{flex:0 0 auto;overflow:visible}}

/* One optical weight for the shared Lucide icon system. */
svg[data-icon], .ribbon-command-menu svg[data-icon] { stroke-width:1.75; fill:none; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* Inset focus rings stay visible inside the horizontally scrolling header. */
.excel-titlebar :is(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary,#2d5a3f);
  outline-offset: -3px;
}
.excel-titlebar button.shared-avatar { padding:0; cursor:pointer; flex-shrink:0; }
.excel-titlebar button.shared-avatar:hover { filter:brightness(1.12); }
.excel-titlebar button.shared-avatar:focus-visible { outline-color:var(--text-main,#222); }

.export-dialog{position:fixed;inset:0;margin:auto;width:min(520px,calc(100vw - 32px));}
.export-dialog form{display:flex;flex-direction:column;gap:12px;position:relative;}
.export-dialog h2{padding-inline-end:48px;}
.export-dialog .modal-close{position:absolute;inset-inline-end:0;top:0;}
.export-dialog label{font-weight:600;}
.export-dialog p{font-size:13px;margin:0;}
.export-dialog select{width:100%;}