/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Composer "+" menu (add file / skills) and attached-skill chips. Chrome tokens
 * only; each app imports this next to its other @lycero/ui sheets. */

.ai-plus {
  display: inline-flex;
  flex-shrink: 0;
}

.ai-plus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-30);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-plus-btn:hover,
.ai-plus-btn.open {
  background: var(--hover);
  color: var(--text);
}

.ai-plus-btn.has-skills {
  color: var(--accent);
}

.ai-plus-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.ai-plus-pop {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 280px;
  max-height: min(420px, 70vh);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-menu);
  font-size: 12px;
}

.ai-plus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.ai-plus-item:hover {
  background: var(--hover);
}

.ai-plus-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-plus-chevron {
  color: var(--text-secondary);
}

.ai-plus-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-subtle);
}

.ai-plus-search-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
}

.ai-plus-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.ai-plus-back:hover {
  background: var(--hover);
  color: var(--text);
}

.ai-plus-search {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-6);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
}

.ai-plus-search:focus {
  outline: none;
  border-color: var(--accent);
}

.ai-plus-list {
  flex: 1;
  min-height: 0;
  margin-top: 4px;
  overflow-y: auto;
}

.ai-plus-empty {
  padding: 12px 8px;
  color: var(--text-secondary);
  text-align: center;
}

.ai-plus-skill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-plus-skill:hover {
  background: var(--hover);
}

.ai-plus-skill.on {
  background: var(--accent-soft);
}

.ai-plus-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hover);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.ai-plus-skill-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.ai-plus-skill-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ai-plus-skill-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-plus-cloud-badge {
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.ai-plus-skill.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ai-plus-skill-desc {
  color: var(--text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-plus-check {
  flex-shrink: 0;
  color: var(--accent);
}

.ai-plus-manage {
  flex-shrink: 0;
  margin-top: 4px;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-6) var(--radius-6);
  color: var(--text-secondary);
}

.ai-skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 8px 0;
}

.ai-skill-chips-sent {
  padding: 0 0 6px;
}

.ai-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  max-width: 220px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-30);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 12px;
}

.ai-skill-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-skill-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.ai-skill-chip-remove:hover {
  background: var(--hover);
  color: var(--text);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* 5-Hour Quota circular ring button & popover in the chat composer footer (Astryx Craft) */

.ai-quota-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ai-quota-ring-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 7px 0 5px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
  background: var(--bg-subtle, rgba(28, 27, 24, 0.04));
  color: var(--text-secondary, #5c5952);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-ring-btn:hover,
.ai-quota-ring-btn.open {
  background: var(--accent-soft, rgba(139, 58, 26, 0.08));
  border-color: var(--accent-border, rgba(139, 58, 26, 0.28));
  color: var(--text-primary, #1c1b18);
}

.ai-quota-ring-svg {
  flex-shrink: 0;
  display: block;
}

.ai-quota-ring-track {
  stroke: var(--border, rgba(139, 58, 26, 0.2));
}

[data-theme='dark'] .ai-quota-ring-track {
  stroke: rgba(245, 244, 239, 0.18);
}

.ai-quota-ring-fill {
  transition: stroke-dashoffset 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-ring-fill.tone-ok {
  stroke: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-ring-fill.tone-ok {
  stroke: #d97757;
}

.ai-quota-ring-fill.tone-warn {
  stroke: var(--warning, #b45309);
}

[data-theme='dark'] .ai-quota-ring-fill.tone-warn {
  stroke: #f59e0b;
}

.ai-quota-ring-fill.tone-danger {
  stroke: var(--danger, #b91c1c);
}

[data-theme='dark'] .ai-quota-ring-fill.tone-danger {
  stroke: #ef4444;
}

.ai-quota-ring-text {
  letter-spacing: -0.01em;
}

/* Popover displaying 5-Hour, Weekly & Monthly quota metrics */
.ai-quota-popover {
  position: fixed;
  z-index: 9999;
  width: 284px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border, #ddd9ce);
  background: var(--surface, #f9f8f3);
  color: var(--text-primary, #1c1b18);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(28, 27, 24, 0.14));
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: ai-quota-pop-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme='dark'] .ai-quota-popover {
  background: #262624;
  border-color: #3d3c38;
  color: #f5f4ef;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

@keyframes ai-quota-pop-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-quota-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(28, 27, 24, 0.1));
}

[data-theme='dark'] .ai-quota-pop-head {
  border-bottom-color: rgba(245, 244, 239, 0.1);
}

.ai-quota-pop-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-quota-pop-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #1c1b18);
}

[data-theme='dark'] .ai-quota-pop-title {
  color: #f5f4ef;
}

.ai-quota-tier-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--accent-soft, rgba(139, 58, 26, 0.1));
  color: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-tier-badge {
  background: rgba(217, 119, 87, 0.16);
  color: #d97757;
}

.ai-quota-sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid var(--border, rgba(28, 27, 24, 0.14));
  background: transparent;
  color: var(--text-secondary, #5c5952);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-sync-btn:hover:not(:disabled) {
  background: var(--accent-soft, rgba(139, 58, 26, 0.08));
  color: var(--text-primary, #1c1b18);
}

[data-theme='dark'] .ai-quota-sync-btn {
  border-color: rgba(245, 244, 239, 0.16);
  color: #b8b5ad;
}

[data-theme='dark'] .ai-quota-sync-btn:hover:not(:disabled) {
  background: rgba(217, 119, 87, 0.14);
  color: #f5f4ef;
}

.ai-quota-spin {
  animation: ai-quota-rotate 0.8s linear infinite;
}

@keyframes ai-quota-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ai-quota-pop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-quota-pop-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-quota-pop-item.featured {
  padding: 7px 8px;
  border-radius: 7px;
  background: var(--accent-soft, rgba(139, 58, 26, 0.06));
  border: 1px solid var(--accent-border, rgba(139, 58, 26, 0.16));
}

[data-theme='dark'] .ai-quota-pop-item.featured {
  background: rgba(217, 119, 87, 0.1);
  border-color: rgba(217, 119, 87, 0.24);
}

.ai-quota-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
}

.ai-quota-pop-label {
  font-weight: 600;
  color: var(--text-primary, #1c1b18);
}

[data-theme='dark'] .ai-quota-pop-label {
  color: #f5f4ef;
}

.ai-quota-pop-pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ai-quota-pop-pct.tone-ok {
  color: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-pop-pct.tone-ok {
  color: #d97757;
}

.ai-quota-pop-pct.tone-warn {
  color: var(--warning, #b45309);
}

[data-theme='dark'] .ai-quota-pop-pct.tone-warn {
  color: #f59e0b;
}

.ai-quota-pop-pct.tone-danger {
  color: var(--danger, #b91c1c);
}

[data-theme='dark'] .ai-quota-pop-pct.tone-danger {
  color: #ef4444;
}

.ai-quota-bar-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: var(--border, rgba(28, 27, 24, 0.12));
  overflow: hidden;
}

[data-theme='dark'] .ai-quota-bar-track {
  background: rgba(245, 244, 239, 0.14);
}

.ai-quota-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-quota-bar-fill.tone-ok {
  background: var(--accent, #8b3a1a);
}

[data-theme='dark'] .ai-quota-bar-fill.tone-ok {
  background: #d97757;
}

.ai-quota-bar-fill.tone-warn {
  background: var(--warning, #b45309);
}

[data-theme='dark'] .ai-quota-bar-fill.tone-warn {
  background: #f59e0b;
}

.ai-quota-bar-fill.tone-danger {
  background: var(--danger, #b91c1c);
}

[data-theme='dark'] .ai-quota-bar-fill.tone-danger {
  background: #ef4444;
}

.ai-quota-pop-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  color: var(--text-secondary, #5c5952);
  font-variant-numeric: tabular-nums;
}

[data-theme='dark'] .ai-quota-pop-sub {
  color: #b8b5ad;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-track {
    stroke: rgba(245, 244, 239, 0.18);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-ok {
    stroke: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-warn {
    stroke: #f59e0b;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-ring-fill.tone-danger {
    stroke: #ef4444;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-popover {
    background: #262624;
    border-color: #3d3c38;
    color: #f5f4ef;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-head {
    border-bottom-color: rgba(245, 244, 239, 0.1);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-title,
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-label {
    color: #f5f4ef;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-tier-badge {
    background: rgba(217, 119, 87, 0.16);
    color: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn {
    border-color: rgba(245, 244, 239, 0.16);
    color: #b8b5ad;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-sync-btn:hover:not(:disabled) {
    background: rgba(217, 119, 87, 0.14);
    color: #f5f4ef;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-item.featured {
    background: rgba(217, 119, 87, 0.1);
    border-color: rgba(217, 119, 87, 0.24);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-ok {
    color: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-warn {
    color: #f59e0b;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-pct.tone-danger {
    color: #ef4444;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-track {
    background: rgba(245, 244, 239, 0.14);
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-ok {
    background: #d97757;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-warn {
    background: #f59e0b;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-bar-fill.tone-danger {
    background: #ef4444;
  }
  :root:not([data-theme='light']):not([data-theme='dark']) .ai-quota-pop-sub {
    color: #b8b5ad;
  }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Lycero Mate — ThinkingBlock (reasoning accordion).
 * Auto-expands while reasoning streams, collapses when finished.
 * Uses design tokens from packages/ui/src/tokens.css.
 * Animations 200ms ease-out (anti-slop: no bounce, no elastic). */

.lycero-thinking-block {
  margin: 8px 0 10px 0;
  border-radius: var(--radius-8, 8px);
  border: 1px solid var(--color-border-subtle, #DDD9CE);
  background-color: var(--color-bg-secondary, #F9F8F3);
  overflow: hidden;
  font-size: 12px;
  transition:
    border-color var(--transition-medium),
    background-color var(--transition-medium);
}

.lycero-thinking-block.expanded {
  border-color: var(--accent, #8B3A1A);
}

.lycero-thinking-block.collapsed {
  /* gentle hover hint */
}

.lycero-thinking-block.collapsed:hover {
  border-color: var(--border-hover, #BDB7A7);
}

.lycero-thinking-block.lycero-thinking-active {
  /* animated gradient stripe when reasoning */
  background-image: linear-gradient(
    90deg,
    var(--color-bg-secondary, #F9F8F3) 0%,
    var(--bg-hover-accent, #F5EBE7) 50%,
    var(--color-bg-secondary, #F9F8F3) 100%
  );
  background-size: 200% 100%;
  animation: lycero-thinking-shimmer 2s linear infinite;
}

@keyframes lycero-thinking-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Dark mode: subtle terracotta-tinted shimmer */
@media (prefers-color-scheme: dark) {
  .lycero-thinking-block.lycero-thinking-active {
    background-image: linear-gradient(
      90deg,
      var(--surface, #2E2D2A) 0%,
      var(--bg-hover-accent, #3D2A24) 50%,
      var(--surface, #2E2D2A) 100%
    );
  }
}

.lycero-thinking-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #56544D);
  user-select: none;
  text-align: left;
  font-family: inherit;
  /* gentle hover */
}

.lycero-thinking-header:hover {
  background-color: var(--bg-hover-subtle, #F1EEE5);
}

.lycero-thinking-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lycero-thinking-pulse {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--accent, #8B3A1A);
  display: inline-block;
  position: relative;
  opacity: 0.9;
}

.lycero-thinking-pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--accent, #8B3A1A);
  opacity: 0.5;
  animation: lycero-thinking-pulse 1.2s ease-out infinite;
}

@keyframes lycero-thinking-pulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.lycero-thinking-title {
  font-weight: 600;
  color: var(--text-primary, #1C1B18);
  font-size: 12.5px;
  letter-spacing: 0;
}

.lycero-thinking-meta {
  font-size: 11px;
  color: var(--text-muted, #6B6860);
}

.lycero-thinking-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted, #6B6860);
}

.lycero-thinking-caret {
  transition: transform var(--transition-medium);
}

.lycero-thinking-caret.open {
  transform: rotate(180deg);
}

.lycero-thinking-content {
  padding: 8px 12px 10px 12px;
  border-top: 1px solid var(--color-border-subtle, #DDD9CE);
  max-height: 260px;
  overflow-y: auto;
  color: var(--text-secondary, #56544D);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
  font-size: 11.5px;
  background-color: var(--color-bg-subtle, #F4F2EB);
}

.lycero-thinking-cursor {
  display: inline-block;
  width: 6px;
  height: 13px;
  margin-left: 3px;
  background-color: var(--accent, #8B3A1A);
  vertical-align: middle;
  animation: lycero-thinking-blink 1s steps(2) infinite;
}

@keyframes lycero-thinking-blink {
  50% { opacity: 0; }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Lycero Mate — Floating Bubble Toolbar.
 * Positioned absolutely inside the host's overlay portal. Sits above the
 * user's text selection; flips below the selection when the top edge is
 * clipped by the viewport. Animations 200ms ease-out (anti-slop). */

.lycero-mate-bubble {
  position: fixed;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background-color: var(--bg-elevated, #FFFFFF);
  border: 1px solid var(--border, #DDD9CE);
  border-radius: 10px;
  box-shadow: 0 6px 20px -4px rgba(28, 27, 24, 0.12),
              0 2px 6px -2px rgba(28, 27, 24, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #1C1B18);
  transform: translateY(-100%);
  /* Native-render right-to-left scripts (Arabic / Hebrew) inside the bubble */
  direction: inherit;
  user-select: none;
  /* Prevent selection clearing when clicking buttons */
  -webkit-user-select: none;
  pointer-events: auto;
  animation: lycero-mate-bubble-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lycero-mate-bubble.lycero-mate-bubble-below {
  transform: translateY(0);
}

.lycero-mate-bubble-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #1C1B18);
  cursor: pointer;
  transition:
    background-color var(--transition-fast, 150ms ease-out),
    border-color var(--transition-fast, 150ms ease-out),
    color var(--transition-fast, 150ms ease-out);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.lycero-mate-bubble-btn:hover {
  background-color: var(--bg-hover-subtle, #F1EEE5);
  border-color: var(--border-hover, #BDB7A7);
}

.lycero-mate-bubble-btn:active {
  background-color: var(--bg-hover-strong, #E8E3D6);
}

.lycero-mate-bubble-btn:focus-visible {
  outline: 2px solid var(--accent, #8B3A1A);
  outline-offset: 1px;
}

.lycero-mate-bubble-btn-cta {
  color: var(--accent, #8B3A1A);
  font-weight: 600;
}

.lycero-mate-bubble-btn-cta:hover {
  background-color: var(--bg-hover-accent, #F5EBE7);
  color: var(--accent-dark, #5F2812);
}

.lycero-mate-bubble-divider {
  width: 1px;
  height: 18px;
  background-color: var(--border, #DDD9CE);
  margin: 0 2px;
}

@keyframes lycero-mate-bubble-in {
  0% {
    opacity: 0;
    transform: translateY(-100%) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(-100%) translateY(0);
  }
}

.lycero-mate-bubble.lycero-mate-bubble-below {
  animation-name: lycero-mate-bubble-in-below;
}

@keyframes lycero-mate-bubble-in-below {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .lycero-mate-bubble {
    background-color: var(--bg-elevated, #2E2D2A);
    border-color: var(--border, #3D3B36);
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.4),
                0 2px 6px -2px rgba(0, 0, 0, 0.25);
  }
  .lycero-mate-bubble-btn:hover {
    background-color: var(--bg-hover-subtle, #353431);
    border-color: var(--border-hover, #4D4A42);
  }
  .lycero-mate-bubble-btn:active {
    background-color: var(--bg-hover-strong, #3F3D38);
  }
  .lycero-mate-bubble-divider {
    background-color: var(--border, #3D3B36);
  }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries. All rights reserved.
 *
 * Astryx Dynamic Capabilities Panel Styles
 */

.lycero-cap-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: var(--surface);
  color: var(--text-primary);
  font-family: var(--gs-font-sans);
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
  box-sizing: border-box;
}

.lycero-cap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lycero-cap-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.lycero-cap-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lycero-cap-active-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-30);
  background-color: var(--bg-hover-accent, #F5EBE7);
  color: var(--color-ai-action, #8B3A1A);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.lycero-cap-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.lycero-cap-refresh-btn:hover:not(:disabled) {
  background-color: var(--hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.lycero-cap-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lycero-cap-spin {
  animation: lycero-spin 1s linear infinite;
}

@keyframes lycero-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.lycero-cap-offline-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--danger-bg, #FAEEE8);
  border: 1px solid var(--danger-border, #E8C7BD);
  border-radius: var(--radius-6);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--danger, #B43A28);
  line-height: 1.45;
}

.lycero-cap-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lycero-cap-card {
  background-color: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color var(--transition-fast);
}

.lycero-cap-card.active {
  border-color: var(--color-border-brand, #8B3A1A);
  background-color: var(--surface);
}

.lycero-cap-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.lycero-cap-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lycero-cap-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lycero-cap-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.lycero-cap-category-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-4, 4px);
  background-color: var(--hover);
  color: var(--text-muted);
}

.lycero-cap-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
}

/* Astryx Toggle Switch */
.lycero-cap-toggle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.lycero-cap-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.lycero-cap-toggle-track {
  width: 38px;
  height: 22px;
  background-color: var(--border-strong);
  border-radius: var(--radius-30);
  transition: background-color var(--transition-fast);
  position: relative;
}

.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track {
  background-color: var(--color-ai-action, #8B3A1A);
}

.lycero-cap-toggle-thumb {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.lycero-cap-toggle-input:checked + .lycero-cap-toggle-track .lycero-cap-toggle-thumb {
  transform: translateX(16px);
}

/* Dynamic Configuration Form */
.lycero-cap-config-form {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lycero-cap-config-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lycero-cap-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lycero-cap-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-primary);
}

.lycero-cap-field-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.lycero-cap-select {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background-color: var(--surface);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: border-color var(--transition-fast);
}

.lycero-cap-select:focus {
  border-color: var(--color-border-brand, #8B3A1A);
}

.lycero-cap-slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lycero-cap-slider {
  flex: 1;
  accent-color: var(--color-ai-action, #8B3A1A);
  cursor: pointer;
}

.lycero-cap-slider-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ai-action, #8B3A1A);
  min-width: 24px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lycero-cap-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}

.lycero-cap-checkbox {
  accent-color: var(--color-ai-action, #8B3A1A);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.lycero-cap-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Lycero Office design tokens — single source of truth for UI chrome colors.
 * Theme switching: light defaults in :root, [data-theme='dark'] overrides,
 * prefers-color-scheme fallback for system mode (no data-theme attribute).
 * Per-app accents (--accent / --accent-dark / --accent-soft) live in each
 * app's styles.css. Document content colors (paper, cells, exports, chart
 * palettes) never live here and never reference these tokens.
 *
 * Astryx palette (DESIGN.md §2):
 *   Day  — Matte Warm Ivory & Terracotta:    #F4F2EB bg, #F9F8F3 paper,
 *                                             #1C1B18 ink, #DDD9CE border,
 *                                             #8B3A1A terracotta accent.
 *   Night — Claude-Warm Charcoal & Radiant Terracotta:
 *                                             #262624 bg (not #000), #2E2D2A paper,
 *                                             #F5F4EF ink, #403E3A border,
 *                                             #D97757 terracotta accent.
 * Anti-slop: tints are warm (no cold blue/gray), and the brand terracotta is
 * the only saturated hue in the chrome. */

:root {
  --ui-scale: 1;
  --docs-revision-bar: #c00000;
  /* ── Day chrome (Warm Ivory) ─────────────────────────────────────────── */
  --surface: #F9F8F3;                /* paper — soft, gentle, anti-glare */
  --surface-subtle: #F4F2EB;         /* canvas background, behind paper */
  --chrome-bg: #F4F2EB;
  --canvas: #E8E4DA;
  --border: #DDD9CE;                 /* hairline — thin, warm */
  --border-subtle: #E5E1D6;
  --border-strong: #C9C4B6;
  --border-hover: #BDB7A7;

  /* Warm-ink text scale. Each step is a tint darker / lighter than the
   * previous, never pure black or pure white. */
  --text: #1C1B18;
  --text-primary: #1C1B18;
  --text-secondary: #56544D;
  --text-tertiary: #7A776C;
  --text-muted: #6B6860;
  --text-dim: #8E8B7E;

  /* Hover/pressed/active — warm gray tints, never cool blue */
  --hover: #EFECE3;
  --pressed: #E8E4D9;
  --active-bg: #E0DBCD;
  --bg-hover: #EFECE3;
  --bg-hover-subtle: #F1EEE5;
  --bg-hover-strong: #E8E4D9;
  --bg-hover-accent: #F5EBE7;
  --bg-content: #FBFAF6;
  --icon-muted: #A39E92;

  /* Semantic states — terracotta-tinted, not blue/red */
  --danger: #B43A28;
  --danger-bg: #FAEEE8;
  --danger-border: #E8C7BD;
  --success: #4D6B3D;
  --success-bg: #EEF3E4;
  --success-border: #C9D7B7;
  --search-hit-bg: #F5E6C8;
  --search-hit-active-bg: #D97757;
  --search-hit-active-ink: #FBFAF6;

  /* Shadows — soft, warm, never harsh black */
  --color-bg-overlay: rgb(28 27 24 / 45%);
  --shadow-modal-strong: 0 20px 25px rgb(60 50 35 / 12%);
  --shadow-btn-hover: 0 2px 8px rgb(60 50 35 / 12%);
  --shadow-menu: 0 8px 24px rgb(60 50 35 / 14%);

  /* ── AI panel & shared chrome aliases ────────────────────────────────── */
  /* Typography: Be Vietnam Pro is the system font (DESIGN.md §3). Falls back
   * to native UI sans (system fonts guarantee zero CLS). */
  --gs-font-sans:
    'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --gs-font-mono:
    'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', 'JetBrains Mono', Consolas,
    sans-serif;
  --color-btn-primary: #1C1B18;
  --color-btn-primary-hover: #38362F;
  --color-btn-primary-text: #FBFAF6;
  --color-ai-action: #8B3A1A;        /* terracotta brand */
  --color-ai-action-hover: #6D2D14;
  --color-ai-action-text: #FBFAF6;
  --color-brand-secondary: #6B5A3E;  /* warm olive — used rarely */
  --color-text-primary: #1C1B18;
  --color-text-secondary: #56544D;
  --color-text-tertiary: #7A776C;
  --color-bg-page: #F9F8F3;
  --color-bg-subtle: #F4F2EB;
  --color-border-default: #DDD9CE;
  --color-border-strong: #C9C4B6;
  --color-border-brand: #8B3A1A;
  --color-error: #B43A28;
  --color-error-hover: #8E2D1E;

  /* ── Geometry ─────────────────────────────────────────────────────────── */
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-30: 30px;

  /* ── Motion (Astryx easing per DESIGN.md §6) ──────────────────────────── */
  /* cubic-bezier(0.16, 1, 0.3, 1) — gentle out-ease, never rubber-band */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-medium: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Type scale ───────────────────────────────────────────────────────── */
  --text-body-lg: 18px;
  --text-small: 14px;
  --text-caption: 12px;

  color-scheme: light;
}

/* ── Night chrome (Claude-Warm Charcoal) ────────────────────────────────── */
[data-theme='dark'] {
  --surface: #2E2D2A;                /* paper (elevated surface) */
  --surface-subtle: #262624;         /* canvas background */
  --chrome-bg: #262624;
  --canvas: #1F1E1C;
  --border: #403E3A;                 /* warm charcoal, never cool */
  --border-subtle: #35332F;
  --border-strong: #4F4C46;
  --border-hover: #5B574F;

  --text: #F5F4EF;                   /* warm off-white, never pure white */
  --text-primary: #F5F4EF;
  --text-secondary: #C8C5BB;
  --text-tertiary: #9A968A;
  --text-muted: #8A8780;
  --text-dim: #74716B;

  --hover: #34322E;
  --pressed: #3A3833;
  --active-bg: #42403B;
  --bg-hover: #34322E;
  --bg-hover-subtle: #2F2D29;
  --bg-hover-strong: #3A3833;
  --bg-hover-accent: #3D2A24;
  --bg-content: #1F1E1C;
  --icon-muted: #6E6B65;

  --danger: #D97757;                 /* terracotta-tinted danger in dark */
  --danger-bg: #3D2A24;
  --danger-border: #5B3D34;
  --success: #88B074;
  --success-bg: #2A3324;
  --success-border: #43533A;
  --search-hit-bg: #5C4A1F;
  --search-hit-active-bg: #D97757;
  --search-hit-active-ink: #1F1E1C;

  --color-bg-overlay: rgb(0 0 0 / 65%);
  --shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
  --shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
  --shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);

  --color-btn-primary: #F5F4EF;
  --color-btn-primary-hover: #D9D6CB;
  --color-btn-primary-text: #1F1E1C;
  --color-ai-action: #D97757;        /* radiant terracotta in dark */
  --color-ai-action-hover: #C46647;
  --color-ai-action-text: #1F1E1C;
  --color-brand-secondary: #B8A47E;
  --color-text-primary: #F5F4EF;
  --color-text-secondary: #C8C5BB;
  --color-text-tertiary: #9A968A;
  --color-bg-page: #2E2D2A;
  --color-bg-subtle: #262624;
  --color-border-default: #403E3A;
  --color-border-strong: #4F4C46;
  --color-border-brand: #D97757;

  color-scheme: dark;
}

/* ── System dark fallback ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --surface: #2E2D2A;
    --surface-subtle: #262624;
    --chrome-bg: #262624;
    --canvas: #1F1E1C;
    --border: #403E3A;
    --border-subtle: #35332F;
    --border-strong: #4F4C46;
    --border-hover: #5B574F;

    --text: #F5F4EF;
    --text-primary: #F5F4EF;
    --text-secondary: #C8C5BB;
    --text-tertiary: #9A968A;
    --text-muted: #8A8780;
    --text-dim: #74716B;

    --hover: #34322E;
    --pressed: #3A3833;
    --active-bg: #42403B;
    --bg-hover: #34322E;
    --bg-hover-subtle: #2F2D29;
    --bg-hover-strong: #3A3833;
    --bg-hover-accent: #3D2A24;
    --bg-content: #1F1E1C;
    --icon-muted: #6E6B65;

    --danger: #D97757;
    --danger-bg: #3D2A24;
    --danger-border: #5B3D34;
    --success: #88B074;
    --success-bg: #2A3324;
    --success-border: #43533A;
    --search-hit-bg: #5C4A1F;
    --search-hit-active-bg: #D97757;
    --search-hit-active-ink: #1F1E1C;

    --color-bg-overlay: rgb(0 0 0 / 65%);
    --shadow-modal-strong: 0 20px 25px rgb(0 0 0 / 50%);
    --shadow-btn-hover: 0 2px 8px rgb(0 0 0 / 40%);
    --shadow-menu: 0 8px 24px rgb(0 0 0 / 55%);

    --color-btn-primary: #F5F4EF;
    --color-btn-primary-hover: #D9D6CB;
    --color-btn-primary-text: #1F1E1C;
    --color-ai-action: #D97757;
    --color-ai-action-hover: #C46647;
    --color-ai-action-text: #1F1E1C;
    --color-brand-secondary: #B8A47E;
    --color-text-primary: #F5F4EF;
    --color-text-secondary: #C8C5BB;
    --color-text-tertiary: #9A968A;
    --color-bg-page: #2E2D2A;
    --color-bg-subtle: #262624;
    --color-border-default: #403E3A;
    --color-border-strong: #4F4C46;
    --color-border-brand: #D97757;

    color-scheme: dark;
  }
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Office-style ScreenTip — themed via the shared tokens (light/dark automatic).
 * The element is a singleton created by installScreenTips(); visibility is
 * driven inline by the script, everything visual lives here. */

.ui-screentip {
  position: fixed;
  z-index: 100000;
  max-width: 280px;
  padding: 5px 10px;
  border-radius: var(--radius-6);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font: 12px/1.45 var(--gs-font-sans);
  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
  pointer-events: none;
  visibility: hidden;
  /* some tips carry embedded newlines (e.g. pdf note pins: contents + hint) */
  white-space: pre-line;
}

.ui-screentip-kbd {
  margin-left: 6px;
  color: var(--text-tertiary);
}

.ui-screentip-detail {
  margin-top: 2px;
  color: var(--text-secondary);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Composer model chip + its upward popover (AiModelPicker). Chrome tokens only;
 * each app imports this next to its other @lycero/ui sheets. */

.ai-model-picker {
  display: inline-flex;
  min-width: 72px;
  flex: 0 1 auto;
}

.ai-model-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  max-width: 200px;
  min-width: 0;
  padding: 0 7px 0 6px;
  flex: 0 1 auto;
  border: 1px solid transparent;
  border-radius: var(--radius-30);
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-model-chip:hover,
.ai-model-chip.open {
  background: var(--hover);
  color: var(--text);
}

.ai-model-chip:focus-visible {
  outline: none;
  border-color: var(--accent);
}

.ai-model-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-model-chip-caret {
  flex-shrink: 0;
  color: var(--text-dim);
}

.gs-provider-logo {
  flex-shrink: 0;
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--text);
}

.gs-provider-logo svg {
  width: 100%;
  height: 100%;
}

.ai-model-pop {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 260px;
  max-height: min(420px, 70vh);
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-menu);
  font-size: 12px;
}

.ai-model-pop-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ai-model-group + .ai-model-group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-subtle);
}

.ai-model-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 3px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.ai-model-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px 5px 28px;
  border: none;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.ai-model-item:hover,
.ai-model-item:focus-visible {
  background: var(--hover);
  outline: none;
}

.ai-model-item.selected {
  background: var(--accent-soft);
}

.ai-model-item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-model-manage {
  flex-shrink: 0;
  margin-top: 4px;
  padding-left: 8px;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-6) var(--radius-6);
  color: var(--text-secondary);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Queued-messages strip above the AI composer (see AiQueueStrip.tsx) */

/*
 * Every rule is anchored on .ai-queue-strip. Written unqualified, these names
 * also matched the queued-edits panel that the Docs, HTML, Markdown and Slides
 * stylesheets style under the same `.ai-queue-*` names — and their sheet loads
 * after this one in every renderer entry, so the strip rendered one way in
 * Sheets and PDF and another way in the other four apps, while our own rules
 * reached into a component this sheet has nothing to do with. Scoping closes
 * both directions; keep new rules under the root, because a bare
 * `.ai-queue-head` here is a cross-component edit, not a local one.
 */
.ai-queue-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--color-bg-subtle);
}

.ai-queue-strip .ai-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* declared rather than absent: the apps style a `.ai-queue-head` too, and a
     padding they set would otherwise reach this element by name alone */
  padding: 0;
  gap: 6px;
}

.ai-queue-strip .ai-queue-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  border: none;
  border-radius: 5px;
  background: none;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-toggle:hover {
  background: var(--hover);
  color: var(--color-text-primary);
}

.ai-queue-strip .ai-queue-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--icon-muted);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-clear:hover {
  background: var(--hover);
  color: var(--color-text-primary);
} /* holds the queue where it is; pressed = held */

.ai-queue-strip .ai-queue-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--icon-muted);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-pause:hover {
  background: var(--hover);
  color: var(--color-text-primary);
}

.ai-queue-strip .ai-queue-pause[aria-pressed='true'] {
  background: var(--hover);
  color: var(--color-text-primary);
}

.ai-queue-strip .ai-queue-hint {
  margin-right: auto;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  /* as above: the apps' `.ai-queue-hint` carries a padding of its own */
  padding: 0;
}

.ai-queue-strip .ai-queue-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 120px;
  overflow-y: auto;
}

.ai-queue-strip .ai-queue-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-queue-strip .ai-queue-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.ai-queue-strip .ai-queue-edit {
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--canvas);
  color: var(--color-text-primary);
  font-size: var(--text-caption);
}

.ai-queue-strip .ai-queue-edit:focus {
  outline: none;
  border-color: var(--border-strong);
}

.ai-queue-strip .ai-queue-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--icon-muted);
  cursor: pointer;
}

.ai-queue-strip .ai-queue-action:hover {
  background: var(--hover);
  color: var(--color-text-primary);
} /* reordering: hold a row to pick it up, Alt+arrows for keyboards */

.ai-queue-strip .ai-queue-item {
  cursor: grab;
}

.ai-queue-strip .ai-queue-item:focus-visible {
  outline: 1px solid var(--accent);
}

.ai-queue-strip .ai-queue-items.ai-queue-dragging,
.ai-queue-strip .ai-queue-items.ai-queue-dragging .ai-queue-item {
  cursor: grabbing;
  user-select: none;
}

.ai-queue-strip .ai-queue-item[data-dragging='true'] {
  opacity: 0.55;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Shared Word-style color picker panel (packages/ui color-picker.tsx).
 * Appearance only — anchor/fixed positioning comes from the per-app class
 * passed through the className prop. Selection outlines use the app accent.
 *
 * Interactive elements use a doubled .gcp-palette prefix: the panel is
 * anchored inside app ribbon rows whose generic resets (e.g. sheets'
 * `.inline-tools button { border: none; height: 30px; }` and its :hover
 * rules) would otherwise outrank single-class rules here. */

.gcp-palette {
  display: block;
  box-sizing: border-box;
  width: 260px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-modal-strong);
  color: var(--text);
  text-align: left;
  cursor: default;
}

.gcp-palette.gcp-palette .gcp-auto {
  display: block;
  min-width: 0;
  width: 100%;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.gcp-palette.gcp-palette .gcp-auto:hover {
  background: var(--hover);
}

/* Selected (color unset / no fill applied): the per-app accent tint, matching
   the shared dropdown's selected option (each app's --accent-soft) */
.gcp-palette.gcp-palette .gcp-auto.selected {
  background: var(--accent-soft);
}

.gcp-section-title {
  margin: 12px 0 6px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}

.gcp-section-title:first-child {
  margin-top: 2px;
}

.gcp-theme-base,
.gcp-theme-shades,
.gcp-standard-row {
  display: grid;
  grid-template-columns: repeat(10, 20px);
  column-gap: 4px;
  row-gap: 0;
}

.gcp-theme-base {
  margin-bottom: 8px;
}

.gcp-row {
  display: contents;
}

.gcp-palette.gcp-palette .gcp-swatch {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 0;
  cursor: pointer;
}

.gcp-palette.gcp-palette .gcp-swatch:hover,
.gcp-palette.gcp-palette .gcp-swatch:focus-visible,
.gcp-palette.gcp-palette .gcp-swatch.selected {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.gcp-palette.gcp-palette .gcp-more {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px -12px -10px;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
}

.gcp-palette.gcp-palette .gcp-more:hover {
  background: var(--hover);
}

.gcp-palette.gcp-palette .gcp-more-icon,
.gcp-palette.gcp-palette .gcp-more-icon:hover {
  display: inline-flex;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0;
  background: none;
  line-height: 1;
}

/* Invisible but covering the whole row (not pointer-events: none): pointer
   events must land on the input itself so callers' moreInputProps hooks
   (onPointerDown arming / selection save) fire before the OS dialog opens. */
.gcp-more input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Shared select-replacement dropdown (Dropdown in dropdown.tsx): themed
 * trigger + anchored popover. Colors are chrome tokens only; apps size the
 * control via a class on the .gs-dd wrapper. */

.gs-dd {
  position: relative;
  display: inline-flex;
  anchor-name: --gs-dd;
  anchor-scope: --gs-dd;
}

.gs-dd-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  height: 26px;
  /* right 5px: caret glyph right edge lands 6px from the outer edge, matching
   * the format-pane caret alignment line */
  padding: 0 5px 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.gs-dd-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.gs-dd-btn:disabled {
  color: var(--text-dim);
  cursor: default;
}

.gs-dd-value {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.gs-dd-caret {
  flex-shrink: 0;
  display: flex;
  color: var(--text-dim);
}

/* fixed + anchored so scroll-container overflow never clips the popover or
 * its shadow; flips above the trigger near the viewport bottom */
.gs-dd-pop {
  position: fixed;
  position-anchor: --gs-dd;
  top: calc(anchor(bottom) + 2px);
  left: anchor(left);
  min-width: anchor-size(width);
  /* flip-inline: a popover wider than its trigger near the window's right edge would
   * otherwise run offscreen and clip (fixed positioning clips at the viewport) —
   * flipping right-aligns it to the trigger so it grows leftwards instead */
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  position-visibility: anchors-visible;
  z-index: 80;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: var(--shadow-menu);
}

/* with a filter box the popover stops scrolling itself: the box stays put
 * above an inner scroller, so it never rides out of view with the list */
.gs-dd-pop.has-search {
  overflow: hidden;
}

.gs-dd-list {
  display: contents;
}

.gs-dd-pop.has-search .gs-dd-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  overflow-y: auto;
}

.gs-dd-search {
  box-sizing: border-box;
  flex-shrink: 0;
  margin: 0 0 2px;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  outline: none;
}

.gs-dd-search:focus {
  border-color: var(--accent);
}

.gs-dd-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: none;
  background: none;
  color: var(--text);
  border-radius: 3px;
  padding: 5px 6px;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.gs-dd-item.active {
  background: var(--hover);
}

.gs-dd-item:disabled {
  color: var(--text-dim);
  cursor: default;
}

.gs-dd-item.selected {
  background: var(--accent-soft);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Word for Mac "Collapse ribbon" (see ribbon-collapse.tsx for the markup contract) */
.ribbon-collapsible {
  position: relative;
}
.ribbon-collapsible [data-ribbon-body] {
  anchor-name: --ribbon-body;
}
.ribbon-collapsible.ribbon-collapsed [data-ribbon-body] {
  display: none;
}
.ribbon-collapse-btn {
  position: absolute;
  position-anchor: --ribbon-body;
  bottom: calc(anchor(bottom) + 3px);
  right: calc(anchor(right) + 4px);
  z-index: 61;
}
.ribbon-collapse-btn,
.ribbon-expand-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  -webkit-app-region: no-drag;
}
.ribbon-collapse-btn:hover,
.ribbon-expand-btn:hover {
  background: var(--hover);
  color: var(--text);
}
.ribbon-expand-btn {
  margin-left: 4px;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Block-level markdown in AI chat bubbles (tables, fenced code); inline chips stay per-app */
.ai-md-table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
}
.ai-md-table {
  border-collapse: collapse;
  font-size: 0.95em;
  line-height: 1.45;
}
.ai-md-table th,
.ai-md-table td {
  border: 1px solid var(--border);
  padding: 4px 10px;
  text-align: left;
  vertical-align: top;
}
.ai-md-table th {
  background: var(--surface-subtle);
  font-weight: 600;
}
.ai-md-pre {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--color-bg-subtle);
  overflow-x: auto;
  line-height: 1.5;
  font-size: 13px;
  font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
}
.ai-md .ai-md-pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* AI panel text size (Settings → General). The chat log and composer are
   scaled as a block so the per-app px type scale keeps its proportions;
   the factor comes from applyAiPanelPrefs() via --ai-font-zoom. */
html[data-ai-font-size] .ai-chat,
html[data-ai-font-size] .ai-composer {
  zoom: var(--ai-font-zoom, 1);
}

/* Move only the assistant; document navigation retains its existing ordering. */
html[data-ai-panel-side='right'] {
  --ai-panel-border-left: 1px;
  --ai-panel-border-right: 0px;
}

html[data-ai-panel-side='right'] .ai-dock {
  order: 1;
}

html[data-ai-panel-side='right'] .ai-panel-resizer {
  left: 0;
  right: auto;
}

/* Sheets has a two-column grid instead of the other apps' flex docks. */
html[data-ai-panel-side='right'] .sheet-body {
  grid-template-columns: minmax(0, 1fr) var(--copilot-width, 360px);
}

html[data-ai-panel-side='right'] .sheet-body > .copilot {
  order: 1;
}

html[data-ai-panel-side='right'] .app-shell.copilot-collapsed .sheet-body {
  grid-template-columns: minmax(0, 1fr) 34px;
}

html[data-ai-panel-side='right'] .ai-panel-collapse svg {
  transform: scaleX(-1);
}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Quote block on a user bubble: the document selection the message targeted */
.ai-msg-scope {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
  padding-left: 9px;
  border-left: 2px solid var(--color-brand-secondary);
  white-space: normal;
}

.ai-msg-scope-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-brand-secondary);
}

.ai-msg-scope-label::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.ai-msg-scope-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--color-text-secondary);
  word-break: break-word;
}
*,:before,:after,::backdrop{--univer-tw-border-spacing-x: 0;--univer-tw-border-spacing-y: 0;--univer-tw-translate-x: 0;--univer-tw-translate-y: 0;--univer-tw-rotate: 0;--univer-tw-skew-x: 0;--univer-tw-skew-y: 0;--univer-tw-scale-x: 1;--univer-tw-scale-y: 1;--univer-tw-pan-x: ;--univer-tw-pan-y: ;--univer-tw-pinch-zoom: ;--univer-tw-scroll-snap-strictness: proximity;--univer-tw-gradient-from-position: ;--univer-tw-gradient-via-position: ;--univer-tw-gradient-to-position: ;--univer-tw-ordinal: ;--univer-tw-slashed-zero: ;--univer-tw-numeric-figure: ;--univer-tw-numeric-spacing: ;--univer-tw-numeric-fraction: ;--univer-tw-ring-inset: ;--univer-tw-ring-offset-width: 0px;--univer-tw-ring-offset-color: #fff;--univer-tw-ring-color: #93c5fd80;--univer-tw-ring-offset-shadow: 0 0 #0000;--univer-tw-ring-shadow: 0 0 #0000;--univer-tw-shadow: 0 0 #0000;--univer-tw-shadow-colored: 0 0 #0000;--univer-tw-blur: ;--univer-tw-brightness: ;--univer-tw-contrast: ;--univer-tw-grayscale: ;--univer-tw-hue-rotate: ;--univer-tw-invert: ;--univer-tw-saturate: ;--univer-tw-sepia: ;--univer-tw-drop-shadow: ;--univer-tw-backdrop-blur: ;--univer-tw-backdrop-brightness: ;--univer-tw-backdrop-contrast: ;--univer-tw-backdrop-grayscale: ;--univer-tw-backdrop-hue-rotate: ;--univer-tw-backdrop-invert: ;--univer-tw-backdrop-opacity: ;--univer-tw-backdrop-saturate: ;--univer-tw-backdrop-sepia: ;--univer-tw-contain-size: ;--univer-tw-contain-layout: ;--univer-tw-contain-paint: ;--univer-tw-contain-style: }*{scrollbar-color:initial;scrollbar-width:initial}.univer-sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.univer-inset-x-0{left:0;right:0}.univer-bottom-0\.5{bottom:.125rem}.univer-bottom-6{bottom:1.5rem}.univer-left-0\.5{left:.125rem}.univer-left-2{left:.5rem}.univer-left-\[-16px\]{left:-16px}.univer-right-4{right:1rem}.univer-right-px{right:1px}.univer-top-px{top:1px}.univer-z-0{z-index:0}.univer-z-\[1081\]{z-index:1081}.-univer-mx-1{margin-left:-.25rem;margin-right:-.25rem}.univer-my-0{margin-top:0;margin-bottom:0}.univer-ml-auto{margin-left:auto}.univer-inline-block{display:inline-block}.\!univer-hidden{display:none!important}.univer-size-2{width:.5rem;height:.5rem}.univer-size-2\.5{width:.625rem;height:.625rem}.univer-h-1\/2{height:50%}.univer-h-12{height:3rem}.univer-h-2{height:.5rem}.univer-h-32{height:8rem}.univer-h-48{height:12rem}.univer-h-\[150px\]{height:150px}.univer-h-\[calc\(100\%-2px\)\]{height:calc(100% - 2px)}.univer-max-h-0{max-height:0}.univer-max-h-80{max-height:20rem}.univer-max-h-\[--radix-popper-available-height\]{max-height:var(--radix-popper-available-height)}.univer-max-h-\[1000px\]{max-height:1000px}.univer-max-h-\[40vh\]{max-height:40vh}.univer-max-h-full{max-height:100%}.univer-max-h-screen{max-height:100vh}.univer-min-h-3\.5{min-height:.875rem}.univer-min-h-\[520px\]{min-height:520px}.\!univer-w-fit{width:fit-content!important}.univer-w-64{width:16rem}.univer-w-72{width:18rem}.univer-w-80{width:20rem}.univer-w-\[--radix-popper-anchor-width\]{width:var(--radix-popper-anchor-width)}.univer-w-\[calc\(100\%-16px\)\]{width:calc(100% - 16px)}.univer-min-w-36{min-width:9rem}.univer-min-w-\[320px\]{min-width:320px}.univer-max-w-2xl{max-width:42rem}.univer-max-w-\[520px\]{max-width:520px}.univer-max-w-\[60vw\]{max-width:60vw}.univer-max-w-sm{max-width:24rem}.univer-max-w-xs{max-width:20rem}.univer-shrink{flex-shrink:1}.univer-shrink-0{flex-shrink:0}.univer-origin-\[--radix-hover-card-content-transform-origin\]{transform-origin:var(--radix-hover-card-content-transform-origin)}.-univer-translate-y-1\/2,.univer--translate-y-1\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-3{--univer-tw-translate-x: .75rem;transform:translate(.75rem,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.-univer-rotate-90{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-0{--univer-tw-rotate: 0deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(0) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-45{--univer-tw-rotate: 45deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(45deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-rotate-\[-90deg\]{--univer-tw-rotate: -90deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(-90deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.\!univer-animate-none{animation:none!important}.univer-cursor-crosshair{cursor:crosshair}.univer-cursor-grabbing{cursor:grabbing}.univer-resize{resize:both}.univer-grid-flow-row{grid-auto-flow:row}.univer-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.univer-flex-col-reverse{flex-direction:column-reverse}.univer-content-center{align-content:center}.univer-gap-5{gap:1.25rem}.univer-space-y-1\.5>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.375rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.375rem;margin-top:calc(.375rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.375rem * var(--univer-tw-space-y-reverse))}.univer-divide-x>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(1px * var(--univer-tw-divide-x-reverse));border-left-width:calc(1px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:1px;border-left-width:calc(1px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y-0>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(0px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:0;border-top-width:calc(0px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(0px * var(--univer-tw-divide-y-reverse))}.univer-text-ellipsis{text-overflow:ellipsis}.univer-text-balance{text-wrap:balance}.\!univer-rounded-b-none{border-bottom-right-radius:0!important;border-bottom-left-radius:0!important}.\!univer-rounded-l-none{border-top-left-radius:0!important;border-bottom-left-radius:0!important}.\!univer-rounded-r-none{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.\!univer-rounded-t-none{border-top-left-radius:0!important;border-top-right-radius:0!important}.univer-rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.\!univer-border-l-0{border-left-width:0!important}.\!univer-border-t-0{border-top-width:0!important}.univer-border-b-0{border-bottom-width:0}.univer-border-l{border-left-width:1px}.univer-border-l-0{border-left-width:0}.univer-border-r{border-right-width:1px}.univer-border-t{border-top-width:1px}.univer-border-t-0{border-top-width:0}.univer-border-dashed{border-style:dashed}.\!univer-border-gray-200{border-color:var(--univer-gray-200)!important}.univer-border-gray-300{border-color:var(--univer-gray-300)}.univer-border-primary-200{border-color:var(--univer-primary-200)}.univer-border-primary-300{border-color:var(--univer-primary-300)}.univer-border-red-300{border-color:var(--univer-red-300)}.univer-border-red-500{border-color:var(--univer-red-500)}.univer-border-white{border-color:var(--univer-white)}.\!univer-bg-primary-600{background-color:var(--univer-primary-600)!important}.univer-bg-\[rgba\(0\,0\,0\,0\.8\)\]{background-color:#000c}.univer-bg-gray-800{background-color:var(--univer-gray-800)}.univer-bg-gray-900{background-color:var(--univer-gray-900)}.univer-bg-primary-500{background-color:var(--univer-primary-500)}.univer-bg-red-500{background-color:var(--univer-red-500)}.univer-bg-sky-100\/70{background-color:#e0f2feb3}.univer-bg-slate-100\/80{background-color:#f1f5f9cc}.univer-bg-slate-900\/90{background-color:#0f172ae6}.univer-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--univer-tw-gradient-stops))}.univer-from-slate-100{--univer-tw-gradient-from: #f1f5f9 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #f1f5f900 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-cyan-50{--univer-tw-gradient-to: #ecfeff00 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #ecfeff var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-blue-100{--univer-tw-gradient-to: var(--univer-blue-100) var(--univer-tw-gradient-to-position)}.univer-fill-current{fill:currentColor}.\!univer-p-2\.5{padding:.625rem!important}.univer-p-6{padding:1.5rem}.\!univer-pl-4{padding-left:1rem!important}.univer-pb-2\.5{padding-bottom:.625rem}.univer-pl-8{padding-left:2rem}.univer-pr-32{padding-right:8rem}.univer-pr-8{padding-right:2rem}.univer-pt-4{padding-top:1rem}.univer-align-middle{vertical-align:middle}.univer-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.univer-text-\[13px\]{font-size:13px}.univer-text-\[8px\]{font-size:8px}.univer-text-sm\/8{font-size:.875rem;line-height:2rem}.univer-text-xs\/6{font-size:.75rem;line-height:1.5rem}.univer-leading-9{line-height:2.25rem}.univer-leading-normal{line-height:1.5}.univer-tracking-wide{letter-spacing:.025em}.univer-tracking-widest{letter-spacing:.1em}.\!univer-text-primary-500{color:var(--univer-primary-500)!important}.univer-text-amber-500{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.univer-text-cyan-700{--univer-tw-text-opacity: 1;color:rgba(14,116,144,var(--univer-tw-text-opacity, 1))}.univer-text-green-500{color:var(--univer-green-500)}.univer-text-sky-500{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.univer-text-sky-700{--univer-tw-text-opacity: 1;color:rgba(3,105,161,var(--univer-tw-text-opacity, 1))}.univer-text-sky-900{--univer-tw-text-opacity: 1;color:rgba(12,74,110,var(--univer-tw-text-opacity, 1))}.univer-text-slate-500{--univer-tw-text-opacity: 1;color:rgba(100,116,139,var(--univer-tw-text-opacity, 1))}.univer-text-slate-600{--univer-tw-text-opacity: 1;color:rgba(71,85,105,var(--univer-tw-text-opacity, 1))}.univer-text-slate-700{--univer-tw-text-opacity: 1;color:rgba(51,65,85,var(--univer-tw-text-opacity, 1))}.univer-text-slate-800{--univer-tw-text-opacity: 1;color:rgba(30,41,59,var(--univer-tw-text-opacity, 1))}.univer-text-violet-500{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.univer-underline-offset-4{text-underline-offset:4px}.univer-opacity-100{opacity:1}.univer-opacity-50{opacity:.5}.univer-opacity-80{opacity:.8}.univer-shadow-\[0_30px_60px_-35px_rgba\(15\,23\,42\,0\.55\)\]{--univer-tw-shadow: 0 30px 60px -35px #0f172a8c;--univer-tw-shadow-colored: 0 30px 60px -35px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 30px 60px -35px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-inner{--univer-tw-shadow: inset 0 2px 4px 0 #0000000d;--univer-tw-shadow-colored: inset 0 2px 4px 0 var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,inset 0 2px 4px #0000000d;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-2{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.\!univer-ring-primary-900{--univer-tw-ring-color: var(--univer-primary-900) !important}.univer-ring-primary-50{--univer-tw-ring-color: var(--univer-primary-50)}.univer-ring-white{--univer-tw-ring-color: var(--univer-white)}.univer-ring-offset-2{--univer-tw-ring-offset-width: 2px}.\!univer-ring-offset-gray-600{--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.univer-ring-offset-white{--univer-tw-ring-offset-color: var(--univer-white)}.univer-drop-shadow-sm{--univer-tw-drop-shadow: drop-shadow(0 1px 1px #0000000d);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\[max-height\,opacity\]{transition-property:max-height,opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-opacity{transition-property:opacity;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-150{transition-duration:.15s}.univer-duration-500{transition-duration:.5s}.univer-duration-75{transition-duration:75ms}.univer-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.univer-will-change-transform{will-change:transform}.univer-scrollbar-thin::-webkit-scrollbar-track{background-color:var(--scrollbar-track);border-radius:var(--scrollbar-track-radius)}.univer-scrollbar-thin::-webkit-scrollbar-track:hover{background-color:var(--scrollbar-track-hover, var(--scrollbar-track))}.univer-scrollbar-thin::-webkit-scrollbar-track:active{background-color:var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)))}.univer-scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:var(--scrollbar-thumb-radius)}.univer-scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover, var(--scrollbar-thumb))}.univer-scrollbar-thin::-webkit-scrollbar-thumb:active{background-color:var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)))}.univer-scrollbar-thin::-webkit-scrollbar-corner{background-color:var(--scrollbar-corner);border-radius:var(--scrollbar-corner-radius)}.univer-scrollbar-thin::-webkit-scrollbar-corner:hover{background-color:var(--scrollbar-corner-hover, var(--scrollbar-corner))}.univer-scrollbar-thin::-webkit-scrollbar-corner:active{background-color:var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)))}.univer-scrollbar-thin{scrollbar-width:thin;scrollbar-color:initial initial;scrollbar-color:var(--scrollbar-thumb, initial) var(--scrollbar-track, initial)}.univer-scrollbar-thin::-webkit-scrollbar{width:8px;height:8px;display:block}.univer-scrollbar-track-gray-50{--scrollbar-track: var(--univer-gray-50) !important}.univer-scrollbar-thumb-gray-300{--scrollbar-thumb: var(--univer-gray-300) !important}.univer-animate-out{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.univer-fade-in,.univer-fade-in-0{--univer-tw-enter-opacity: 0}.univer-fade-out{--univer-tw-exit-opacity: 0}.univer-zoom-in-95{--univer-tw-enter-scale: .95}.univer-duration-150{animation-duration:.15s}.univer-duration-200{animation-duration:.2s}.univer-duration-300{animation-duration:.3s}.univer-duration-500{animation-duration:.5s}.univer-duration-75{animation-duration:75ms}.univer-ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.univer-ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.placeholder\:univer-text-gray-200::placeholder{color:var(--univer-gray-200)}.placeholder\:univer-text-gray-400::placeholder{color:var(--univer-gray-400)}.before\:univer-absolute:before{content:var(--univer-tw-content);position:absolute}.before\:univer-top-1\/2:before{content:var(--univer-tw-content);top:50%}.before\:univer-block:before{content:var(--univer-tw-content);display:block}.before\:univer-h-px:before{content:var(--univer-tw-content);height:1px}.before\:univer-w-full:before{content:var(--univer-tw-content);width:100%}.before\:-univer-translate-y-1\/2:before{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.before\:univer-bg-gray-200:before{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.before\:univer-content-\[\"\"\]:before{--univer-tw-content: "";content:"";content:var(--univer-tw-content)}.data-\[disabled\]\:univer-pointer-events-none[data-disabled]{pointer-events:none}.data-\[orientation\=horizontal\]\:univer-h-px[data-orientation=horizontal]{height:1px}.data-\[orientation\=vertical\]\:univer-h-full[data-orientation=vertical]{height:100%}.data-\[orientation\=horizontal\]\:univer-w-full[data-orientation=horizontal]{width:100%}.data-\[orientation\=vertical\]\:univer-w-px[data-orientation=vertical]{width:1px}.data-\[state\=open\]\:univer-bg-gray-100[data-state=open]{background-color:var(--univer-gray-100)}.data-\[disabled\]\:univer-opacity-50[data-disabled]{opacity:.5}.data-\[state\=open\]\:univer-animate-in[data-state=open]{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.data-\[state\=closed\]\:univer-animate-out[data-state=closed]{--univer-tw-exit-opacity: initial;--univer-tw-exit-scale: initial;--univer-tw-exit-rotate: initial;--univer-tw-exit-translate-x: initial;--univer-tw-exit-translate-y: initial;animation-name:exit;animation-duration:.15s}.data-\[state\=closed\]\:univer-fade-out-0[data-state=closed]{--univer-tw-exit-opacity: 0}.data-\[state\=open\]\:univer-fade-in-0[data-state=open]{--univer-tw-enter-opacity: 0}.data-\[state\=closed\]\:univer-zoom-out-95[data-state=closed]{--univer-tw-exit-scale: .95}.data-\[state\=open\]\:univer-zoom-in-95[data-state=open]{--univer-tw-enter-scale: .95}.data-\[side\=bottom\]\:univer-slide-in-from-top-2[data-side=bottom]{--univer-tw-enter-translate-y: -.5rem}.data-\[side\=left\]\:univer-slide-in-from-right-2[data-side=left]{--univer-tw-enter-translate-x: .5rem}.data-\[side\=right\]\:univer-slide-in-from-left-2[data-side=right]{--univer-tw-enter-translate-x: -.5rem}.data-\[side\=top\]\:univer-slide-in-from-bottom-2[data-side=top]{--univer-tw-enter-translate-y: .5rem}.data-\[state\=closed\]\:univer-slide-out-to-left-1\/2[data-state=closed]{--univer-tw-exit-translate-x: -50%}.data-\[state\=closed\]\:univer-slide-out-to-top-\[48\%\][data-state=closed]{--univer-tw-exit-translate-y: -48%}.data-\[state\=open\]\:univer-slide-in-from-left-1\/2[data-state=open]{--univer-tw-enter-translate-x: -50%}.data-\[state\=open\]\:univer-slide-in-from-top-\[48\%\][data-state=open]{--univer-tw-enter-translate-y: -48%}.hover\:univer-border-red-400:hover{border-color:var(--univer-red-400)}.hover\:univer-border-transparent:hover{border-color:#0000}.hover\:univer-bg-primary-500:hover{background-color:var(--univer-primary-500)}.hover\:univer-bg-red-400:hover{background-color:var(--univer-red-400)}.hover\:univer-text-gray-500:hover{color:var(--univer-gray-500)}.hover\:univer-text-primary-500:hover{color:var(--univer-primary-500)}.hover\:univer-text-white:hover{color:var(--univer-white)}.hover\:univer-underline:hover{text-decoration-line:underline}.hover\:univer-opacity-100:hover{opacity:1}.hover\:univer-opacity-70:hover{opacity:.7}.hover\:univer-opacity-80:hover{opacity:.8}.focus\:univer-border-primary-600:focus{border-color:var(--univer-primary-600)}.focus\:univer-bg-gray-100:focus{background-color:var(--univer-gray-100)}.focus\:univer-ring-primary-50:focus{--univer-tw-ring-color: var(--univer-primary-50)}.active\:univer-border-red-600:active{border-color:var(--univer-red-600)}.active\:univer-bg-primary-700:active{background-color:var(--univer-primary-700)}.active\:univer-bg-red-600:active{background-color:var(--univer-red-600)}.active\:univer-text-primary-700:active{color:var(--univer-primary-700)}.disabled\:univer-pointer-events-none:disabled{pointer-events:none}.disabled\:univer-opacity-50:disabled{opacity:.5}@media(min-width:640px){.sm\:\!univer-flex-row{flex-direction:row!important}.sm\:\!univer-justify-end{justify-content:flex-end!important}.sm\:\!univer-space-x-2>:not([hidden])~:not([hidden]){--univer-tw-space-x-reverse: 0 !important;margin-right:0!important;margin-right:calc(.5rem * var(--univer-tw-space-x-reverse))!important;margin-left:calc(.5rem * (1 - var(--univer-tw-space-x-reverse)))!important;margin-left:.5rem!important;margin-left:calc(.5rem * calc(1 - var(--univer-tw-space-x-reverse)))!important}.sm\:\!univer-rounded-lg{border-radius:.5rem!important}.sm\:\!univer-text-left{text-align:left!important}}@media(min-width:768px){.md\:univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.rtl\:univer-left-px:where([dir=rtl],[dir=rtl] *){left:1px}.rtl\:univer-right-auto:where([dir=rtl],[dir=rtl] *){right:auto}.rtl\:univer-rounded-l-md:where([dir=rtl],[dir=rtl] *){border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.rtl\:univer-rounded-r-none:where([dir=rtl],[dir=rtl] *){border-top-right-radius:0;border-bottom-right-radius:0}.rtl\:univer-border-l-0:where([dir=rtl],[dir=rtl] *){border-left-width:0}.rtl\:univer-border-r:where([dir=rtl],[dir=rtl] *){border-right-width:1px}.dark\:\!univer-border-gray-500:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-500)!important}.dark\:\!univer-border-primary-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-700)!important}.dark\:\!univer-bg-gray-100:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-100)!important}.dark\:\!univer-bg-primary-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-600)!important}.dark\:\!univer-text-gray-900:where(.univer-dark,.univer-dark *){color:var(--univer-gray-900)!important}.dark\:\!univer-text-primary-500:where(.univer-dark,.univer-dark *){color:var(--univer-primary-500)!important}.dark\:\!univer-text-sky-400:where(.univer-dark,.univer-dark *){--univer-tw-text-opacity: 1 !important;color:rgba(56,189,248,var(--univer-tw-text-opacity, 1))!important}.dark\:\!univer-ring-primary-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-600) !important}.dark\:\!univer-ring-primary-900:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\:\!univer-ring-offset-gray-600:where(.univer-dark,.univer-dark *){--univer-tw-ring-offset-color: var(--univer-gray-600) !important}.dark\:\!univer-scrollbar-track-gray-900:where(.univer-dark,.univer-dark *){--scrollbar-track: var(--univer-gray-900) !important}.dark\:\!univer-scrollbar-thumb-gray-700:where(.univer-dark,.univer-dark *){--scrollbar-thumb: var(--univer-gray-700) !important}.dark\:before\:\!univer-bg-gray-600:where(.univer-dark,.univer-dark *):before{content:var(--univer-tw-content);background-color:var(--univer-gray-600)!important}.dark\:data-\[state\=open\]\:\!univer-bg-gray-600[data-state=open]:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\:hover\:\!univer-text-white:hover:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:focus\:\!univer-border-primary-500:focus:where(.univer-dark,.univer-dark *){border-color:var(--univer-primary-500)!important}.dark\:focus\:\!univer-bg-gray-600:focus:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\:focus\:\!univer-ring-primary-900:focus:where(.univer-dark,.univer-dark *){--univer-tw-ring-color: var(--univer-primary-900) !important}.dark\:focus-visible\:\!univer-border-gray-600:focus-visible:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\:active\:\!univer-bg-gray-700:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.\[\&\:\:-webkit-calendar-picker-indicator\]\:univer-hidden::-webkit-calendar-picker-indicator{display:none}.\[\&\:\:-webkit-calendar-picker-indicator\]\:univer-appearance-none::-webkit-calendar-picker-indicator{-webkit-appearance:none;appearance:none}.\[\&\>input\]\:univer-w-11>input{width:2.75rem}.\[\&\>input\]\:univer-border-gray-200>input{border-color:var(--univer-gray-200)}.\[\&\>input\]\:focus\:univer-border-primary-500:focus>input{border-color:var(--univer-primary-500)}.dark\:\[\&\>input\]\:\!univer-border-gray-600>input:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\:\[\&\>input\]\:\!univer-text-white>input:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.\[\&\>svg\]\:univer-block>svg{display:block}.\[\&\>svg\]\:univer-size-4>svg{width:1rem;height:1rem}.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-0>ul:not(:last-child){border-width:0}.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-r>ul:not(:last-child){border-right-width:1px}.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-solid>ul:not(:last-child){border-style:solid}.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-r-gray-200>ul:not(:last-child){border-right-color:var(--univer-gray-200)}.\[\&_\[data-description\]\]\:univer-text-sm [data-description]{font-size:.875rem;line-height:1.25rem}.\[\&_\[data-description\]\]\:univer-text-gray-200 [data-description]{color:var(--univer-gray-200)}.\[\&_\[data-description\]\]\:univer-text-gray-600 [data-description]{color:var(--univer-gray-600)}.\[\&_\[data-icon\]\>svg\]\:univer-relative [data-icon]>svg{position:relative}.\[\&_\[data-icon\]\>svg\]\:univer-top-1 [data-icon]>svg{top:.25rem}.\[\&_\[data-icon\]\]\:univer-self-baseline [data-icon]{align-self:baseline}.\[\&_\[data-icon\]\]\:univer-text-amber-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(245,158,11,var(--univer-tw-text-opacity, 1))}.\[\&_\[data-icon\]\]\:univer-text-green-500 [data-icon]{color:var(--univer-green-500)}.\[\&_\[data-icon\]\]\:univer-text-primary-600 [data-icon]{color:var(--univer-primary-600)}.\[\&_\[data-icon\]\]\:univer-text-red-500 [data-icon]{color:var(--univer-red-500)}.\[\&_\[data-icon\]\]\:univer-text-sky-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(14,165,233,var(--univer-tw-text-opacity, 1))}.\[\&_\[data-icon\]\]\:univer-text-violet-500 [data-icon]{--univer-tw-text-opacity: 1;color:rgba(139,92,246,var(--univer-tw-text-opacity, 1))}.\[\&_\[data-icon\]\]\:univer-text-yellow-500 [data-icon]{color:var(--univer-yellow-500)}.\[\&_\[data-sonner-toast\]\]\:univer-rounded-2xl [data-sonner-toast]{border-radius:1rem}.\[\&_\[data-sonner-toast\]\]\:univer-border [data-sonner-toast]{border-width:1px}.\[\&_\[data-sonner-toast\]\]\:univer-border-solid [data-sonner-toast]{border-style:solid}.\[\&_\[data-sonner-toast\]\]\:univer-border-gray-200 [data-sonner-toast]{border-color:var(--univer-gray-200)}.\[\&_\[data-sonner-toast\]\]\:univer-shadow-\[0_16px_40px_-20px_rgba\(15\,23\,42\,0\.55\)\] [data-sonner-toast]{--univer-tw-shadow: 0 16px 40px -20px #0f172a8c;--univer-tw-shadow-colored: 0 16px 40px -20px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 16px 40px -20px #0f172a8c;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\[\&_\[data-sonner-toast\]\]\:univer-shadow-md [data-sonner-toast]{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.\[\&_\[data-sonner-toast\]\]\:univer-backdrop-blur-sm [data-sonner-toast]{--univer-tw-backdrop-blur: blur(4px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.dark\:\[\&_\[data-sonner-toast\]\]\:\!univer-border-gray-600 [data-sonner-toast]:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.\[\&_\[data-title\]\]\:univer-text-sm [data-title]{font-size:.875rem;line-height:1.25rem}.\[\&_\[data-title\]\]\:univer-text-gray-900 [data-title]{color:var(--univer-gray-900)}.\[\&_\[data-u-comp\=form-layout\]\]\:univer-max-w-\[calc\(50\%-8px\)\] [data-u-comp=form-layout]{max-width:calc(50% - 8px)}.\[\&_\[data-u-comp\=form-layout\]\]\:univer-shrink [data-u-comp=form-layout]{flex-shrink:1}.\[\&_\[data-u-comp\=form-layout\]\]\:univer-grow [data-u-comp=form-layout]{flex-grow:1}.\[\&_\[data-u-comp\=input\]\]\:univer-w-full [data-u-comp=input]{width:100%}.\[\&_\[data-u-comp\=input\]\]\:univer-border-red-500 [data-u-comp=input]{border-color:var(--univer-red-500)}.\[\&_\[data-u-comp\=pager-left-arrow\]\:hover\]\:\!univer-bg-gray-600 [data-u-comp=pager-left-arrow]:hover,.\[\&_\[data-u-comp\=pager-right-arrow\]\:hover\]\:\!univer-bg-gray-600 [data-u-comp=pager-right-arrow]:hover{background-color:var(--univer-gray-600)!important}.\[\&_\[data-u-comp\=select\]\]\:univer-w-full [data-u-comp=select]{width:100%}.\[\&_\[data-u-comp\=select\]\]\:univer-border-red-500 [data-u-comp=select]{border-color:var(--univer-red-500)}.\[\&_input\]\:univer-box-border input{box-sizing:border-box}.\[\&_input\]\:univer-flex input{display:flex}.\[\&_input\]\:univer-h-7 input{height:1.75rem}.\[\&_input\]\:univer-items-center input{align-items:center}.\[\&_input\]\:univer-rounded input{border-radius:.25rem}.\[\&_input\]\:univer-border input{border-width:1px}.\[\&_input\]\:univer-border-solid input{border-style:solid}.\[\&_input\]\:univer-border-gray-200 input{border-color:var(--univer-gray-200)}.\[\&_input\]\:univer-border-gray-600 input{border-color:var(--univer-gray-600)}.\[\&_input\]\:univer-bg-transparent input{background-color:#0000}.\[\&_input\]\:univer-px-1\.5 input{padding-left:.375rem;padding-right:.375rem}.\[\&_input\]\:univer-text-gray-700 input{color:var(--univer-gray-700)}.\[\&_input\]\:univer-text-white input{color:var(--univer-white)}.\[\&_input\]\:univer-outline-none input{outline-offset:2px;outline:2px solid #0000}.\[\&_svg\]\:univer-pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:univer-size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:univer-shrink-0 svg{flex-shrink:0}.univer-popup{z-index:1070;--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow);border-radius:6px;position:fixed;top:-9999px;left:-9999px;overflow:hidden}.univer-popup-enter{transform-origin:0 0;opacity:0;animation-duration:.15s;animation-timing-function:cubic-bezier(.08,.82,.17,1);animation-play-state:paused;animation-fill-mode:both}.univer-popup-enter-active{animation-name:popup-slide-up-in;animation-play-state:running}.univer-popup-exit{transform-origin:0 0;opacity:1;animation-name:popup-slide-up-out;animation-duration:.15s;animation-timing-function:cubic-bezier(.6,.04,.98,.34);animation-play-state:running;animation-fill-mode:both}.univer-popup-exit-active{display:none}@keyframes popup-slide-up-in{0%{transform-origin:0 0;opacity:0;transform:scaleY(0)}to{transform-origin:0 0;opacity:1;transform:scaleY(1)}}@keyframes popup-slide-up-out{0%{transform-origin:0 0;opacity:1;transform:scaleY(1)}to{transform-origin:0 0;opacity:0;transform:scaleY(0)}}.univer-popup-mask{z-index:1060;position:fixed;top:0;bottom:0;left:0;right:0}.univer-pointer-events-auto{pointer-events:auto}.univer-invisible{visibility:hidden}.univer-sticky{position:sticky}.-univer-left-\[99999\]{left:-99999px}.-univer-top-\[99999\]{top:-99999px}.univer-left-1\/2{left:50%}.univer-left-\[-9999px\]{left:-9999px}.univer-right-2{right:.5rem}.univer-top-\[-9999px\]{top:-9999px}.univer-top-\[calc\(50\%-6px\)\]{top:calc(50% - 6px)}.univer-z-20{z-index:20}.univer-z-\[-1\]{z-index:-1}.univer-z-\[1020\]{z-index:1020}.univer-z-\[1080\]{z-index:1080}.univer-z-\[1\]{z-index:1}.univer-mx-2{margin-left:.5rem;margin-right:.5rem}.univer-mx-auto{margin-left:auto;margin-right:auto}.univer-mt-6{margin-top:1.5rem}.univer-line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.\!univer-size-3\.5{width:.875rem!important;height:.875rem!important}.univer-size-12{width:3rem;height:3rem}.univer-size-3\.5{width:.875rem;height:.875rem}.univer-size-7{width:1.75rem;height:1.75rem}.univer-size-9{width:2.25rem;height:2.25rem}.univer-h-0{height:0}.univer-h-1\.5{height:.375rem}.univer-max-h-\[80vh\]{max-height:80vh}.univer-max-h-\[min\(72vh\,560px\)\]{max-height:min(72vh,560px)}.univer-min-h-\[560px\]{min-height:560px}.univer-min-h-\[56px\]{min-height:56px}.univer-min-h-full{min-height:100%}.univer-w-0{width:0}.univer-w-1{width:.25rem}.univer-w-10{width:2.5rem}.univer-w-40{width:10rem}.univer-w-7{width:1.75rem}.univer-w-8{width:2rem}.univer-w-96{width:24rem}.univer-w-max{width:max-content}.univer-w-screen{width:100vw}.univer-min-w-52{min-width:13rem}.univer-min-w-6{min-width:1.5rem}.univer-min-w-min{min-width:min-content}.univer-max-w-3xl{max-width:48rem}.univer-max-w-5xl{max-width:64rem}.univer-max-w-96{max-width:24rem}.univer-max-w-\[--radix-popper-available-width\]{max-width:var(--radix-popper-available-width)}.univer-max-w-\[32\%\]{max-width:32%}.univer-max-w-\[560px\]{max-width:560px}.univer-max-w-\[calc\(100vw-16px\)\]{max-width:calc(100vw - 16px)}.univer-max-w-full{max-width:100%}.univer-origin-center{transform-origin:center}.-univer-translate-x-1\/2{--univer-tw-translate-x: -50%;transform:translate(-50%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-0{--univer-tw-translate-x: 0px;transform:translateY(var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-translate-x-full{--univer-tw-translate-x: 100%;transform:translate(100%,var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-cursor-col-resize{cursor:col-resize}.univer-grid-cols-\[1fr\]{grid-template-columns:1fr}.univer-grid-cols-\[22px_minmax\(0\,1fr\)_22px\]{grid-template-columns:22px minmax(0,1fr) 22px}.univer-grid-cols-\[28px_minmax\(0\,1fr\)_auto\]{grid-template-columns:28px minmax(0,1fr) auto}.univer-grid-cols-\[32px_minmax\(0\,1fr\)_32px\]{grid-template-columns:32px minmax(0,1fr) 32px}.univer-grid-cols-\[auto\,1fr\]{grid-template-columns:auto 1fr}.univer-grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}.univer-grid-rows-\[100\%\]{grid-template-rows:100%}.univer-grid-rows-\[auto_1fr\]{grid-template-rows:auto 1fr}.univer-grid-rows-\[auto_1fr_auto\]{grid-template-rows:auto 1fr auto}.univer-flex-wrap{flex-wrap:wrap}.univer-items-end{align-items:flex-end}.univer-gap-0\.5{gap:.125rem}.univer-overscroll-contain{overscroll-behavior:contain}.univer-scroll-smooth{scroll-behavior:smooth}.\!univer-rounded-full{border-radius:9999px!important}.\!univer-rounded-xl{border-radius:.75rem!important}.univer-rounded-2xl{border-radius:1rem}.univer-rounded-3xl{border-radius:1.5rem}.univer-rounded-xl{border-radius:.75rem}.univer-rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.univer-rounded-t-\[28px\]{border-top-left-radius:28px;border-top-right-radius:28px}.univer-border-0{border-width:0}.\!univer-bg-gray-200{background-color:var(--univer-gray-200)!important}.\!univer-bg-gray-500{background-color:var(--univer-gray-500)!important}.univer-bg-\[rgba\(15\,23\,42\,0\.32\)\]{background-color:#0f172a52}.univer-bg-gray-300{background-color:var(--univer-gray-300)}.univer-bg-gray-50{background-color:var(--univer-gray-50)}.univer-bg-gray-700{background-color:var(--univer-gray-700)}.univer-bg-primary-50{background-color:var(--univer-primary-50)}.univer-bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--univer-tw-gradient-stops))}.univer-from-slate-950{--univer-tw-gradient-from: #020617 var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #02061700 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-via-blue-950{--univer-tw-gradient-to: #17255400 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), #172554 var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to)}.univer-to-cyan-900{--univer-tw-gradient-to: #164e63 var(--univer-tw-gradient-to-position)}.univer-p-8{padding:2rem}.univer-px-0{padding-left:0;padding-right:0}.univer-px-0\.5{padding-left:.125rem;padding-right:.125rem}.univer-px-3{padding-left:.75rem;padding-right:.75rem}.univer-pb-2{padding-bottom:.5rem}.univer-pl-2{padding-left:.5rem}.univer-pl-4{padding-left:1rem}.univer-pr-1\.5{padding-right:.375rem}.univer-pt-3{padding-top:.75rem}.univer-text-left{text-align:left}.univer-text-right{text-align:right}.univer-font-sans{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.univer-text-2xl{font-size:1.5rem;line-height:2rem}.univer-uppercase{text-transform:uppercase}.univer-leading-4{line-height:1rem}.univer-leading-none{line-height:1}.univer-tracking-\[0\.08em\]{letter-spacing:.08em}.univer-tracking-tight{letter-spacing:-.025em}.\!univer-text-gray-600{color:var(--univer-gray-600)!important}.univer-text-current{color:currentColor}.univer-text-slate-200{--univer-tw-text-opacity: 1;color:rgba(226,232,240,var(--univer-tw-text-opacity, 1))}.univer-underline{text-decoration-line:underline}.univer-opacity-0{opacity:0}.univer-opacity-30{opacity:.3}.univer-opacity-40{opacity:.4}.univer-opacity-60{opacity:.6}.univer-shadow-\[0_-16px_48px_rgba\(15\,23\,42\,0\.18\)\]{--univer-tw-shadow: 0 -16px 48px #0f172a2e;--univer-tw-shadow-colored: 0 -16px 48px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 -16px 48px #0f172a2e;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-ring-0{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-600{--univer-tw-ring-color: var(--univer-primary-600)}.univer-backdrop-blur-\[2px\]{--univer-tw-backdrop-blur: blur(2px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-backdrop-blur-xl{--univer-tw-backdrop-blur: blur(24px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\[width\]{transition-property:width;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:1;opacity:var(--univer-tw-enter-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-enter-translate-x, 0),var(--univer-tw-enter-translate-y, 0),0) scale3d(var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1),var(--univer-tw-enter-scale, 1)) rotate(var(--univer-tw-enter-rotate, 0))}}@keyframes exit{to{opacity:1;opacity:var(--univer-tw-exit-opacity, 1);transform:translateZ(0) scaleZ(1) rotate(0);transform:translate3d(var(--univer-tw-exit-translate-x, 0),var(--univer-tw-exit-translate-y, 0),0) scale3d(var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1),var(--univer-tw-exit-scale, 1)) rotate(var(--univer-tw-exit-rotate, 0))}}.univer-animate-in{--univer-tw-enter-opacity: initial;--univer-tw-enter-scale: initial;--univer-tw-enter-rotate: initial;--univer-tw-enter-translate-x: initial;--univer-tw-enter-translate-y: initial;animation-name:enter;animation-duration:.15s}.univer-fade-in{--univer-tw-enter-opacity: 0}.univer-fade-in-70{--univer-tw-enter-opacity: .7}.last\:univer-border-b-0:last-child{border-bottom-width:0}.empty\:univer-hidden:empty{display:none}.hover\:univer-opacity-50:hover{opacity:.5}.focus\:univer-bg-white:focus{background-color:var(--univer-white)}.focus\:univer-ring-2:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\:univer-ring-primary-600:focus-visible{--univer-tw-ring-color: var(--univer-primary-600)}.focus-visible\:univer-ring-offset-0:focus-visible{--univer-tw-ring-offset-width: 0px}.active\:univer-bg-gray-200:active{background-color:var(--univer-gray-200)}.enabled\:hover\:univer-bg-gray-50:hover:enabled{background-color:var(--univer-gray-50)}.enabled\:active\:univer-bg-gray-100:active:enabled{background-color:var(--univer-gray-100)}.disabled\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:univer-text-gray-300:disabled{color:var(--univer-gray-300)}.disabled\:univer-opacity-40:disabled{opacity:.4}.disabled\:hover\:univer-bg-transparent:hover:disabled{background-color:#0000}@media(min-width:640px){.sm\:\!univer-block{display:block!important}}.rtl\:univer-pl-1\.5:where([dir=rtl],[dir=rtl] *){padding-left:.375rem}.rtl\:univer-pr-0:where([dir=rtl],[dir=rtl] *){padding-right:0}.rtl\:univer-pr-2:where([dir=rtl],[dir=rtl] *){padding-right:.5rem}.dark\:\!univer-bg-gray-200:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-200)!important}.dark\:\!univer-bg-primary-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-400)!important}.dark\:\!univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)!important}.dark\:\!univer-text-gray-600:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.dark\:\!univer-text-gray-800:where(.univer-dark,.univer-dark *){color:var(--univer-gray-800)!important}.dark\:\!univer-text-primary-100:where(.univer-dark,.univer-dark *){color:var(--univer-primary-100)!important}.dark\:\!univer-text-primary-300:where(.univer-dark,.univer-dark *){color:var(--univer-primary-300)!important}.dark\:\!univer-text-primary-400:where(.univer-dark,.univer-dark *){color:var(--univer-primary-400)!important}.dark\:hover\:\!univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\:hover\:\!univer-bg-transparent:hover:where(.univer-dark,.univer-dark *){background-color:#0000!important}.dark\:active\:\!univer-bg-gray-600:active:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\:disabled\:\!univer-text-gray-600:disabled:where(.univer-dark,.univer-dark *){color:var(--univer-gray-600)!important}.\[\&\:\:-webkit-scrollbar\]\:univer-hidden::-webkit-scrollbar{display:none}.\[\&\>\*\]\:univer-m-0>*{margin:0}.\[\&\>\*\]\:univer-inline-flex>*{display:inline-flex}.\[\&\>\*\]\:univer-h-6>*{height:1.5rem}.\[\&\>\*\]\:univer-min-h-7>*{min-height:1.75rem}.\[\&\>\*\]\:univer-min-w-7>*{min-width:1.75rem}.\[\&\>\*\]\:univer-appearance-none>*{-webkit-appearance:none;appearance:none}.\[\&\>\*\]\:univer-items-center>*{align-items:center}.\[\&\>\*\]\:univer-justify-center>*{justify-content:center}.\[\&\>\*\]\:univer-rounded>*{border-radius:.25rem}.\[\&\>\*\]\:univer-rounded-md>*{border-radius:.375rem}.\[\&\>\*\]\:univer-border-0>*{border-width:0}.\[\&\>\*\]\:univer-px-1>*{padding-left:.25rem;padding-right:.25rem}.\[\&\>\*\]\:univer-px-1\.5>*{padding-left:.375rem;padding-right:.375rem}.\[\&\>\*\]\:univer-leading-none>*{line-height:1}.\[\&\>\*\]\:univer-outline-none>*{outline-offset:2px;outline:2px solid #0000}.\[\&\>\*\]\:univer-transition-colors>*{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:\[\&\>\*\]\:univer-bg-gray-100>:hover{background-color:var(--univer-gray-100)}.\[\&\>span\]\:univer-truncate>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.\[\&\>span\]\:univer-text-sm>span{font-size:.875rem;line-height:1.25rem}.\[\&\>span\]\:univer-font-medium>span{font-weight:500}.\[\&\>svg\]\:univer-shrink-0>svg{flex-shrink:0}.\[\&\>svg\]\:univer-text-lg>svg{font-size:1.125rem;line-height:1.75rem}.\[\&\>svg\]\:univer-text-gray-700>svg{color:var(--univer-gray-700)}.\[\&_\*\]\:univer-box-border *{box-sizing:border-box}.\[\&_\.univer-custom-label\]\:univer-text-sm .univer-custom-label{font-size:.875rem;line-height:1.25rem}.\[\&_\.univer-custom-label\]\:univer-leading-none .univer-custom-label{line-height:1}.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-h-8 .univer-toolbar-button-selector-main{height:2rem!important}.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-rounded-none .univer-toolbar-button-selector-main{border-radius:0!important}.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-rounded-l-md .univer-toolbar-button-selector-main{border-top-left-radius:.375rem!important;border-bottom-left-radius:.375rem!important}.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-px-1\.5 .univer-toolbar-button-selector-main{padding-left:.375rem!important;padding-right:.375rem!important}.\[\&_\.univer-toolbar-button-selector-root\]\:\!univer-h-8 .univer-toolbar-button-selector-root{height:2rem!important}.\[\&_\.univer-toolbar-button-selector-root\]\:univer-overflow-hidden .univer-toolbar-button-selector-root{overflow:hidden}.\[\&_\.univer-toolbar-button-selector-root\]\:\!univer-rounded-md .univer-toolbar-button-selector-root{border-radius:.375rem!important}.\[\&_\.univer-toolbar-button-selector-root\]\:\!univer-pr-0 .univer-toolbar-button-selector-root{padding-right:0!important}.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-static .univer-toolbar-button-selector-trigger{position:static!important}.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-h-8 .univer-toolbar-button-selector-trigger{height:2rem!important}.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-w-6 .univer-toolbar-button-selector-trigger{width:1.5rem!important}.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-rounded-none .univer-toolbar-button-selector-trigger{border-radius:0!important}.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-rounded-r-md .univer-toolbar-button-selector-trigger{border-top-right-radius:.375rem!important;border-bottom-right-radius:.375rem!important}.\[\&_\.univer-toolbar-selector-root\]\:\!univer-h-8 .univer-toolbar-selector-root{height:2rem!important}.\[\&_\.univer-toolbar-selector-root\]\:\!univer-gap-1 .univer-toolbar-selector-root{gap:.25rem!important}.\[\&_\.univer-toolbar-selector-root\]\:\!univer-rounded-md .univer-toolbar-selector-root{border-radius:.375rem!important}.\[\&_\.univer-toolbar-selector-root\]\:\!univer-px-1\.5 .univer-toolbar-selector-root{padding-left:.375rem!important;padding-right:.375rem!important}.\[\&_\.univer-toolbar-selector-trigger\]\:\!univer-pl-0\.5 .univer-toolbar-selector-trigger{padding-left:.125rem!important}.\[\&_\.univer-tooltip\]\:univer-inline-flex .univer-tooltip{display:inline-flex}.\[\&_\.univer-tooltip\]\:univer-h-full .univer-tooltip{height:100%}.\[\&_\.univer-tooltip\]\:univer-items-center .univer-tooltip{align-items:center}.\[\&_\[data-u-command\]\]\:\!univer-h-8 [data-u-command]{height:2rem!important}.\[\&_\[data-u-command\]\]\:\!univer-min-h-8 [data-u-command]{min-height:2rem!important}.\[\&_\[data-u-command\]\]\:\!univer-rounded-md [data-u-command]{border-radius:.375rem!important}.\[\&_\[data-u-command\]\]\:\!univer-px-1\.5 [data-u-command]{padding-left:.375rem!important;padding-right:.375rem!important}.\[\&_button\]\:\!univer-m-0 button{margin:0!important}.\[\&_button\]\:\!univer-h-8 button{height:2rem!important}.\[\&_button\]\:\!univer-min-w-8 button{min-width:2rem!important}.\[\&_button\]\:\!univer-appearance-none button{-webkit-appearance:none!important;appearance:none!important}.\[\&_button\]\:\!univer-rounded-md button{border-radius:.375rem!important}.\[\&_button\]\:\!univer-border-0 button{border-width:0!important}.\[\&_button\]\:\!univer-bg-transparent button{background-color:#0000!important}.\[\&_button\]\:\!univer-p-0 button{padding:0!important}.\[\&_button\]\:\!univer-px-1\.5 button{padding-left:.375rem!important;padding-right:.375rem!important}.\[\&_button\]\:\!univer-leading-none button{line-height:1!important}.\[\&_button\]\:\!univer-outline-none button{outline-offset:2px!important;outline:2px solid #0000!important}.\[\&_input\:focus\]\:\!univer-ring-0 input:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color) !important;--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color) !important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000!important;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)!important}.\[\&_input\]\:\!univer-m-0 input{margin:0!important}.\[\&_input\]\:univer-h-6 input{height:1.5rem}.\[\&_input\]\:univer-w-7 input{width:1.75rem}.\[\&_input\]\:\!univer-appearance-none input{-webkit-appearance:none!important;appearance:none!important}.\[\&_input\]\:\!univer-border-0 input{border-width:0!important}.\[\&_input\]\:univer-border-none input{border-style:none}.\[\&_input\]\:\!univer-bg-transparent input{background-color:#0000!important}.\[\&_input\]\:\!univer-p-0 input{padding:0!important}.\[\&_input\]\:univer-p-0 input{padding:0}.\[\&_input\]\:univer-text-sm input{font-size:.875rem;line-height:1.25rem}.\[\&_input\]\:\!univer-leading-none input{line-height:1!important}.\[\&_input\]\:\!univer-outline-none input{outline-offset:2px!important;outline:2px solid #0000!important}.univer-fixed{position:fixed}.univer-bottom-0{bottom:0}.univer-left-5{left:1.25rem}.univer-left-\[5px\]{left:5px}.univer-top-4{top:1rem}.univer-top-\[5px\]{top:5px}.univer-z-\[10000\]{z-index:10000}.univer-mb-1{margin-bottom:.25rem}.univer-mr-1{margin-right:.25rem}.univer-mt-1\.5{margin-top:.375rem}.univer-mt-12{margin-top:3rem}.univer-mt-5{margin-top:1.25rem}.univer-size-0\.5{width:.125rem;height:.125rem}.univer-size-3{width:.75rem;height:.75rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-size-8{width:2rem;height:2rem}.univer-h-16{height:4rem}.univer-h-3\.5{height:.875rem}.univer-h-\[24px\]{height:24px}.univer-min-h-8{min-height:2rem}.univer-w-2{width:.5rem}.univer-w-2\.5{width:.625rem}.univer-w-28{width:7rem}.univer-w-4\/5{width:80%}.univer-w-\[0px\]{width:0}.univer-w-\[212px\]{width:212px}.univer-w-\[72px\]{width:72px}.univer-min-w-\[180px\]{min-width:180px}.univer-flex-shrink-0{flex-shrink:0}.univer-cursor-grab{cursor:grab}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.univer-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.univer-place-items-center{place-items:center}.univer-items-stretch{align-items:stretch}.univer-gap-2\.5{gap:.625rem}.univer-gap-3{gap:.75rem}.univer-gap-x-0\.5{-moz-column-gap:.125rem;column-gap:.125rem}.univer-gap-y-px{row-gap:1px}.univer-overflow-x-hidden{overflow-x:hidden}.univer-rounded-r-2xl{border-top-right-radius:1rem;border-bottom-right-radius:1rem}.\!univer-border-primary-500{border-color:var(--univer-primary-500)!important}.univer-border-primary-500{border-color:var(--univer-primary-500)}.\!univer-bg-primary-50{background-color:var(--univer-primary-50)!important}.\!univer-bg-primary-900{background-color:var(--univer-primary-900)!important}.univer-bg-gray-400{background-color:var(--univer-gray-400)}.univer-px-2\.5{padding-left:.625rem;padding-right:.625rem}.univer-py-0{padding-top:0;padding-bottom:0}.univer-pb-0\.5{padding-bottom:.125rem}.univer-pb-4{padding-bottom:1rem}.univer-pr-1{padding-right:.25rem}.univer-pr-2{padding-right:.5rem}.univer-pt-1\.5{padding-top:.375rem}.univer-pt-14{padding-top:3.5rem}.univer-text-lg{font-size:1.125rem;line-height:1.75rem}.univer-font-\[500\],.univer-font-medium{font-weight:500}.univer-font-normal{font-weight:400}.univer-leading-\[24px\]{line-height:24px}.\!univer-text-gray-200{color:var(--univer-gray-200)!important}.\!univer-text-gray-400{color:var(--univer-gray-400)!important}.\!univer-text-primary-600{color:var(--univer-primary-600)!important}.univer-text-gray-800{color:var(--univer-gray-800)}.univer-shadow-sm{--univer-tw-shadow: 0px 1px 2px 0px #1e284d14;--univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #1e284d14;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-backdrop-blur-\[10px\]{--univer-tw-backdrop-blur: blur(10px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-duration-300{transition-duration:.3s}.univer-group:hover .group-hover\:univer-bg-gray-500{background-color:var(--univer-gray-500)}.hover\:univer-border-primary-500:hover{border-color:var(--univer-primary-500)}.hover\:univer-bg-white:hover{background-color:var(--univer-white)}.hover\:univer-text-gray-900:hover{color:var(--univer-gray-900)}.hover\:univer-text-primary-600:hover{color:var(--univer-primary-600)}.hover\:univer-shadow-md:hover{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.active\:univer-cursor-grabbing:active{cursor:grabbing}.dark\:\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\:\!univer-bg-gray-500:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-500)!important}.dark\:\!univer-bg-primary-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-primary-900)!important}.dark\:\!univer-text-gray-100:where(.univer-dark,.univer-dark *){color:var(--univer-gray-100)!important}.univer-group:hover .dark\:group-hover\:\!univer-bg-gray-300:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-300)!important}.univer-pointer-events-none{pointer-events:none}.univer-inset-0{top:0;bottom:0;left:0;right:0}.-univer-bottom-0\.5{bottom:-.125rem}.-univer-left-0\.5{left:-.125rem}.-univer-right-0\.5{right:-.125rem}.-univer-top-0\.5{top:-.125rem}.univer-left-0{left:0}.univer-left-1{left:.25rem}.univer-left-3{left:.75rem}.univer-right-0{right:0}.univer-right-5{right:1.25rem}.univer-top-0{top:0}.univer-top-0\.5{top:.125rem}.univer-z-10{z-index:10}.univer-z-\[1001\]{z-index:1001}.univer-z-\[100\]{z-index:100}.univer-mx-1{margin-left:.25rem;margin-right:.25rem}.univer-mx-1\.5{margin-left:.375rem;margin-right:.375rem}.univer-mb-1\.5{margin-bottom:.375rem}.univer-mb-3{margin-bottom:.75rem}.univer-mb-4{margin-bottom:1rem}.univer-ml-1{margin-left:.25rem}.univer-ml-1\.5{margin-left:.375rem}.univer-ml-3{margin-left:.75rem}.univer-ml-6{margin-left:1.5rem}.univer-ml-px{margin-left:1px}.univer-mr-1\.5{margin-right:.375rem}.univer-mr-2{margin-right:.5rem}.univer-mr-5{margin-right:1.25rem}.univer-mt-auto{margin-top:auto}.univer-hidden{display:none}.univer-size-0{width:0;height:0}.univer-size-10{width:2.5rem;height:2.5rem}.univer-size-4{width:1rem;height:1rem}.univer-h-0\.5{height:.125rem}.univer-h-1{height:.25rem}.univer-h-10{height:2.5rem}.univer-h-20{height:5rem}.univer-h-4{height:1rem}.univer-h-5{height:1.25rem}.univer-h-6{height:1.5rem}.univer-h-60{height:15rem}.univer-h-8{height:2rem}.univer-h-9{height:2.25rem}.univer-h-\[270px\]{height:270px}.univer-h-\[30px\]{height:30px}.univer-h-\[calc\(100\%-16px\)\]{height:calc(100% - 16px)}.univer-h-\[calc\(100\%-8px\)\]{height:calc(100% - 8px)}.univer-h-px{height:1px}.univer-max-h-52{max-height:13rem}.univer-max-h-\[100px\]{max-height:100px}.univer-max-h-\[360px\]{max-height:360px}.univer-min-h-0{min-height:0}.univer-min-h-\[30px\]{min-height:30px}.\!univer-w-\[90px\]{width:90px!important}.univer-w-16{width:4rem}.univer-w-20{width:5rem}.univer-w-24{width:6rem}.univer-w-5{width:1.25rem}.univer-w-6{width:1.5rem}.univer-w-60{width:15rem}.univer-w-\[100px\]{width:100px}.univer-w-\[130px\]{width:130px}.univer-w-\[156px\]{width:156px}.univer-w-\[300px\]{width:300px}.univer-w-\[50\%\]{width:50%}.univer-w-fit{width:fit-content}.univer-min-w-0{min-width:0}.univer-min-w-72{min-width:18rem}.univer-max-w-32{max-width:8rem}.univer-max-w-36{max-width:9rem}.univer-max-w-64{max-width:16rem}.univer-max-w-\[190px\]{max-width:190px}.univer-max-w-\[200px\]{max-width:200px}.univer-max-w-\[calc\(100\%-112px\)\]{max-width:calc(100% - 112px)}.univer-max-w-fit{max-width:fit-content}.univer-max-w-lg{max-width:32rem}.univer-flex-shrink-0,.univer-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-rotate-180{--univer-tw-rotate: 180deg;transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(180deg) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}@keyframes univer-spin{to{transform:rotate(360deg)}}.univer-animate-spin{animation:1s linear infinite univer-spin}.univer-cursor-not-allowed{cursor:not-allowed}.univer-appearance-none{-webkit-appearance:none;appearance:none}.univer-grid-flow-col{grid-auto-flow:column}.univer-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.univer-grid-cols-\[1fr\,auto\,auto\,auto\]{grid-template-columns:1fr auto auto auto}.univer-flex-row{flex-direction:row}.univer-flex-row-reverse{flex-direction:row-reverse}.univer-flex-nowrap{flex-wrap:nowrap}.univer-gap-7{gap:1.75rem}.univer-gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.univer-space-y-2>:not([hidden])~:not([hidden]){--univer-tw-space-y-reverse: 0;margin-top:calc(.5rem * (1 - var(--univer-tw-space-y-reverse)));margin-top:.5rem;margin-top:calc(.5rem * calc(1 - var(--univer-tw-space-y-reverse)));margin-bottom:0;margin-bottom:calc(.5rem * var(--univer-tw-space-y-reverse))}.univer-divide-x-0>:not([hidden])~:not([hidden]){--univer-tw-divide-x-reverse: 0;border-right-width:0;border-right-width:calc(0px * var(--univer-tw-divide-x-reverse));border-left-width:calc(0px * (1 - var(--univer-tw-divide-x-reverse)));border-left-width:0;border-left-width:calc(0px * calc(1 - var(--univer-tw-divide-x-reverse)))}.univer-divide-y>:not([hidden])~:not([hidden]){--univer-tw-divide-y-reverse: 0;border-top-width:calc(1px * (1 - var(--univer-tw-divide-y-reverse)));border-top-width:1px;border-top-width:calc(1px * calc(1 - var(--univer-tw-divide-y-reverse)));border-bottom-width:0;border-bottom-width:calc(1px * var(--univer-tw-divide-y-reverse))}.univer-divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.univer-divide-gray-200>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-200)}.univer-justify-self-center{justify-self:center}.univer-overflow-hidden{overflow:hidden}.univer-overflow-x-auto{overflow-x:auto}.univer-overflow-y-hidden{overflow-y:hidden}.univer-rounded-full{border-radius:9999px}.univer-rounded-md{border-radius:.375rem}.univer-rounded-sm{border-radius:.125rem}.univer-border-2{border-width:2px}.univer-border-4{border-width:4px}.univer-border-b{border-bottom-width:1px}.univer-border-solid{border-style:solid}.univer-border-none{border-style:none}.univer-border-\[rgba\(13\,13\,13\,0\.12\)\]{border-color:#0d0d0d1f}.univer-border-gray-100{border-color:var(--univer-gray-100)}.univer-border-gray-200{border-color:var(--univer-gray-200)}.univer-border-transparent{border-color:#0000}.univer-border-r-gray-200{border-right-color:var(--univer-gray-200)}.univer-border-t-primary-500{border-top-color:var(--univer-primary-500)}.\!univer-bg-gray-700{background-color:var(--univer-gray-700)!important}.\!univer-bg-gray-800{background-color:var(--univer-gray-800)!important}.\!univer-bg-gray-900{background-color:var(--univer-gray-900)!important}.univer-bg-blue-500{background-color:var(--univer-blue-500)}.univer-bg-blue-600{background-color:var(--univer-blue-600)}.univer-bg-gray-100{background-color:var(--univer-gray-100)}.univer-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--univer-tw-gradient-stops))}.univer-from-gray-50{--univer-tw-gradient-from: var(--univer-gray-50) var(--univer-tw-gradient-from-position);--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position);--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to)}.univer-to-gray-100{--univer-tw-gradient-to: var(--univer-gray-100) var(--univer-tw-gradient-to-position)}.univer-fill-gray-900{fill:var(--univer-gray-900)}.univer-fill-primary-600{fill:var(--univer-primary-600)}.univer-p-1{padding:.25rem}.univer-p-4{padding:1rem}.univer-px-1{padding-left:.25rem;padding-right:.25rem}.univer-px-1\.5{padding-left:.375rem;padding-right:.375rem}.univer-px-3\.5{padding-left:.875rem;padding-right:.875rem}.univer-px-5{padding-left:1.25rem;padding-right:1.25rem}.univer-py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.univer-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.univer-pb-1{padding-bottom:.25rem}.univer-pl-1\.5{padding-left:.375rem}.univer-pl-3{padding-left:.75rem}.univer-pl-6{padding-left:1.5rem}.univer-pr-5{padding-right:1.25rem}.univer-pt-1{padding-top:.25rem}.univer-pt-2{padding-top:.5rem}.univer-text-center{text-align:center}.univer-font-semibold{font-weight:600}.univer-leading-6{line-height:1.5rem}.univer-leading-7{line-height:1.75rem}.\!univer-text-blue-400{color:var(--univer-blue-400)!important}.\!univer-text-gray-700{color:var(--univer-gray-700)!important}.\!univer-text-white{color:var(--univer-white)!important}.univer-text-blue-500{color:var(--univer-blue-500)}.univer-text-blue-600{color:var(--univer-blue-600)}.univer-text-gray-200{color:var(--univer-gray-200)}.univer-text-gray-300{color:var(--univer-gray-300)}.univer-text-gray-700{color:var(--univer-gray-700)}.univer-text-green-600{color:var(--univer-green-600)}.univer-text-primary-700{color:var(--univer-primary-700)}.univer-text-red-600{color:var(--univer-red-600)}.univer-text-rose-600{--univer-tw-text-opacity: 1;color:rgba(225,29,72,var(--univer-tw-text-opacity, 1))}.univer-text-yellow-500{color:var(--univer-yellow-500)}.univer-shadow{--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-blur-sm{--univer-tw-blur: blur(4px);filter:var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow)}.univer-backdrop-blur{--univer-tw-backdrop-blur: blur(8px);backdrop-filter:var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia)}.univer-transition-\[colors\,box-shadow\]{transition-property:colors,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-\[height\]{transition-property:height;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-200{transition-duration:.2s}.univer-ease-linear{transition-timing-function:linear}.after\:univer-absolute:after{content:var(--univer-tw-content);position:absolute}.after\:univer-right-0:after{content:var(--univer-tw-content);right:0}.after\:univer-top-1\/2:after{content:var(--univer-tw-content);top:50%}.after\:univer-block:after{content:var(--univer-tw-content);display:block}.after\:univer-h-4:after{content:var(--univer-tw-content);height:1rem}.after\:univer-w-px:after{content:var(--univer-tw-content);width:1px}.after\:-univer-translate-y-1\/2:after{content:var(--univer-tw-content);--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.after\:univer-bg-gray-200:after{content:var(--univer-tw-content);background-color:var(--univer-gray-200)}.after\:univer-content-\[\"\"\]:after{--univer-tw-content: "";content:"";content:var(--univer-tw-content)}.last\:univer-mb-0:last-child{margin-bottom:0}.univer-group:hover .group-hover\:univer-flex{display:flex}.hover\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.hover\:univer-bg-transparent:hover{background-color:#0000}.focus\:univer-border-primary-500:focus{border-color:var(--univer-primary-500)}.focus\:univer-outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus-visible\:univer-ring-2:focus-visible{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.focus-visible\:univer-ring-primary-500:focus-visible{--univer-tw-ring-color: var(--univer-primary-500)}.active\:univer-bg-gray-100:active{background-color:var(--univer-gray-100)}.dark\:\!univer-divide-gray-600:where(.univer-dark,.univer-dark *)>:not([hidden])~:not([hidden]){border-color:var(--univer-gray-600)!important}.dark\:\!univer-border-gray-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-700)!important}.dark\:\!univer-border-r-gray-700:where(.univer-dark,.univer-dark *){border-right-color:var(--univer-gray-700)!important}.dark\:\!univer-bg-black:where(.univer-dark,.univer-dark *){background-color:var(--univer-black)!important}.dark\:\!univer-bg-blue-400:where(.univer-dark,.univer-dark *){background-color:var(--univer-blue-400)!important}.dark\:\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:\!univer-bg-gray-800:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.dark\:\!univer-from-gray-800:where(.univer-dark,.univer-dark *){--univer-tw-gradient-from: var(--univer-gray-800) var(--univer-tw-gradient-from-position) !important;--univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position) !important;--univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to) !important}.dark\:\!univer-to-gray-900:where(.univer-dark,.univer-dark *){--univer-tw-gradient-to: var(--univer-gray-900) var(--univer-tw-gradient-to-position) !important}.dark\:\!univer-fill-white:where(.univer-dark,.univer-dark *){fill:var(--univer-white)!important}.dark\:\!univer-text-blue-400:where(.univer-dark,.univer-dark *){color:var(--univer-blue-400)!important}.dark\:\!univer-text-gray-700:where(.univer-dark,.univer-dark *){color:var(--univer-gray-700)!important}.dark\:\!univer-text-green-400:where(.univer-dark,.univer-dark *){color:var(--univer-green-400)!important}.dark\:\!univer-text-red-400:where(.univer-dark,.univer-dark *){color:var(--univer-red-400)!important}.dark\:hover\:\!univer-bg-gray-800:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.\[\&\>div\:first-child\]\:univer-px-2\.5>div:first-child{padding-left:.625rem;padding-right:.625rem}.\[\&\>div\]\:univer-h-5>div{height:1.25rem}.\[\&\>div\]\:univer-ring-transparent>div{--univer-tw-ring-color: transparent}.\[\&_canvas\]\:univer-absolute canvas{position:absolute}.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-left-1\.5{left:.375rem}.univer-top-1\/2{top:50%}.univer-z-\[15\]{z-index:15}.univer-m-0{margin:0}.-univer-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.univer-mx-0{margin-left:0;margin-right:0}.univer-my-1{margin-top:.25rem;margin-bottom:.25rem}.univer-my-2{margin-top:.5rem;margin-bottom:.5rem}.univer-mb-0{margin-bottom:0}.univer-mb-2{margin-bottom:.5rem}.univer-ml-2{margin-left:.5rem}.univer-ml-4{margin-left:1rem}.univer-mr-0{margin-right:0}.univer-mt-0{margin-top:0}.univer-mt-1{margin-top:.25rem}.univer-box-border{box-sizing:border-box}.univer-block{display:block}.univer-inline-flex{display:inline-flex}.univer-size-6{width:1.5rem;height:1.5rem}.univer-size-full{width:100%;height:100%}.univer-h-\[18px\]{height:18px}.univer-h-\[364px\]{height:364px}.univer-max-h-60{max-height:15rem}.univer-max-h-72{max-height:18rem}.univer-max-h-\[350px\]{max-height:350px}.univer-w-\[250px\]{width:250px}.univer-flex-1{flex:1}.-univer-translate-y-1\/2{--univer-tw-translate-y: -50%;transform:translate(var(--univer-tw-translate-x),-50%) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));transform:translate(var(--univer-tw-translate-x),var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skew(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y))}.univer-select-none{user-select:none}.univer-list-none{list-style-type:none}.univer-justify-center{justify-content:center}.univer-justify-around{justify-content:space-around}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-overflow-visible{overflow:visible}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-whitespace-nowrap{white-space:nowrap}.univer-whitespace-pre-wrap{white-space:pre-wrap}.univer-break-words{word-wrap:break-word}.univer-break-all{word-break:break-all}.univer-rounded-none{border-radius:0}.univer-rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.univer-border{border-width:1px}.univer-border-r-0{border-right-width:0}.univer-border-gray-600{border-color:var(--univer-gray-600)}.univer-border-primary-600{border-color:var(--univer-primary-600)}.\!univer-bg-gray-600{background-color:var(--univer-gray-600)!important}.univer-bg-gray-200{background-color:var(--univer-gray-200)}.univer-bg-primary-600{background-color:var(--univer-primary-600)}.univer-bg-transparent{background-color:#0000}.univer-bg-white{background-color:var(--univer-white)}.univer-p-0{padding:0}.univer-p-0\.5{padding:.125rem}.univer-p-3{padding:.75rem}.univer-px-4{padding-left:1rem;padding-right:1rem}.univer-px-6{padding-left:1.5rem;padding-right:1.5rem}.univer-px-7{padding-left:1.75rem;padding-right:1.75rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-py-3{padding-top:.75rem;padding-bottom:.75rem}.univer-pb-3{padding-bottom:.75rem}.univer-pt-0{padding-top:0}.univer-text-base{font-size:1rem;line-height:1.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-font-bold{font-weight:700}.univer-font-medium{font-weight:500}.univer-leading-5{line-height:1.25rem}.univer-leading-\[13px\]{line-height:13px}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-text-red-500{color:var(--univer-red-500)}.univer-text-white{color:var(--univer-white)}.univer-shadow-md{--univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;--univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 6px -2px #1e284d14,0 2px 6px -1px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-outline-none{outline-offset:2px;outline:2px solid #0000}.univer-ring-1{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.univer-ring-primary-500{--univer-tw-ring-color: var(--univer-primary-500)}.univer-ring-red-500{--univer-tw-ring-color: var(--univer-red-500)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:univer-bg-gray-200:hover{background-color:var(--univer-gray-200)}.hover\:univer-bg-gray-300:hover{background-color:var(--univer-gray-300)}.dark\:\!univer-bg-gray-600:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.dark\:\!univer-bg-gray-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\:\!univer-text-gray-300:where(.univer-dark,.univer-dark *){color:var(--univer-gray-300)!important}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.univer-mb-5{margin-bottom:1.25rem}.univer-mr-3{margin-right:.75rem}.univer-mt-2{margin-top:.5rem}.univer-mt-3{margin-top:.75rem}.univer-mt-3\.5{margin-top:.875rem}.univer-mt-4{margin-top:1rem}.univer-flex{display:flex}.univer-grid{display:grid}.univer-h-7{height:1.75rem}.univer-h-full{height:100%}.univer-max-h-\[400px\]{max-height:400px}.univer-w-32{width:8rem}.univer-w-36{width:9rem}.univer-w-4{width:1rem}.univer-w-\[340px\]{width:340px}.univer-w-full{width:100%}.univer-cursor-default{cursor:default}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-between{justify-content:space-between}.univer-gap-1{gap:.25rem}.univer-gap-1\.5{gap:.375rem}.univer-gap-6{gap:1.5rem}.univer-overflow-auto{overflow:auto}.univer-overflow-y-auto{overflow-y:auto}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-p-1\.5{padding:.375rem}.univer-p-2{padding:.5rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-pb-5{padding-bottom:1.25rem}.univer-text-sm,.univer-text-sm\/5{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-600{color:var(--univer-gray-600)}.univer-text-primary-600{color:var(--univer-primary-600)}.hover\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.dark\:\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}.dark\:\!univer-text-gray-400:where(.univer-dark,.univer-dark *){color:var(--univer-gray-400)!important}.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}
.univer-pointer-events-none{pointer-events:none}.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-bottom-\[-13px\]{bottom:-13px}.univer-left-0{left:0}.univer-right-1{right:.25rem}.univer-z-\[999\]{z-index:999}.univer-my-2\.5{margin-top:.625rem;margin-bottom:.625rem}.univer-mb-1{margin-bottom:.25rem}.univer-mb-2{margin-bottom:.5rem}.univer-mb-2\.5{margin-bottom:.625rem}.univer-mb-3{margin-bottom:.75rem}.univer-ml-1{margin-left:.25rem}.univer-ml-2{margin-left:.5rem}.univer-ml-3{margin-left:.75rem}.univer-ml-6{margin-left:1.5rem}.univer-mr-2{margin-right:.5rem}.univer-mt-0{margin-top:0}.univer-mt-1{margin-top:.25rem}.univer-mt-3{margin-top:.75rem}.univer-mt-4{margin-top:1rem}.univer-mt-5{margin-top:1.25rem}.univer-mt-6{margin-top:1.5rem}.univer-box-border{box-sizing:border-box}.univer-flex{display:flex}.univer-grid{display:grid}.univer-hidden{display:none}.univer-size-4{width:1rem;height:1rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-size-6{width:1.5rem;height:1.5rem}.univer-h-5{height:1.25rem}.univer-h-8{height:2rem}.univer-h-full{height:100%}.univer-w-1\/2{width:50%}.univer-w-36{width:9rem}.univer-w-64{width:16rem}.univer-w-80{width:20rem}.univer-w-\[45\%\]{width:45%}.univer-w-full{width:100%}.univer-min-w-0{min-width:0}.univer-min-w-\[72px\]{min-width:72px}.univer-max-w-\[250px\]{max-width:250px}.univer-max-w-full{max-width:100%}.univer-flex-shrink{flex-shrink:1}.univer-flex-shrink-0{flex-shrink:0}.univer-cursor-grab{cursor:grab}.univer-cursor-pointer{cursor:pointer}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-flex-col{flex-direction:column}.univer-flex-wrap{flex-wrap:wrap}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-center{justify-content:center}.univer-justify-between{justify-content:space-between}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-space-x-2>:not([hidden])~:not([hidden]){--univer-tw-space-x-reverse: 0;margin-right:0;margin-right:calc(.5rem * var(--univer-tw-space-x-reverse));margin-left:calc(.5rem * (1 - var(--univer-tw-space-x-reverse)));margin-left:.5rem;margin-left:calc(.5rem * calc(1 - var(--univer-tw-space-x-reverse)))}.univer-overflow-hidden{overflow:hidden}.univer-text-ellipsis{text-overflow:ellipsis}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-rounded-md{border-radius:.375rem}.univer-border{border-width:1px}.univer-border-solid{border-style:solid}.univer-border-red-500{border-color:var(--univer-red-500)}.\!univer-bg-gray-700{background-color:var(--univer-gray-700)!important}.univer-bg-gray-100{background-color:var(--univer-gray-100)}.univer-bg-white{background-color:var(--univer-white)}.univer-fill-primary-600{fill:var(--univer-primary-600)}.univer-p-1{padding:.25rem}.univer-p-4{padding:1rem}.univer-px-1{padding-left:.25rem;padding-right:.25rem}.univer-px-4{padding-left:1rem;padding-right:1rem}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-py-4{padding-top:1rem;padding-bottom:1rem}.univer-pl-1{padding-left:.25rem}.univer-pl-5{padding-left:1.25rem}.univer-pr-8{padding-right:2rem}.univer-pt-2{padding-top:.5rem}.univer-text-\[10px\]{font-size:10px}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-font-bold{font-weight:700}.univer-font-medium{font-weight:500}.univer-italic{font-style:italic}.univer-text-gray-300{color:var(--univer-gray-300)}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-600{color:var(--univer-gray-600)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-red-500{color:var(--univer-red-500)}.univer-transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-group:hover .group-hover\:univer-flex{display:flex}.hover\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.hover\:univer-bg-gray-200:hover{background-color:var(--univer-gray-200)}.dark\:\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.\[\&\>div\:first-child\]\:univer-px-2\.5>div:first-child{padding-left:.625rem;padding-right:.625rem}.\[\&\>div\]\:univer-h-5>div{height:1.25rem}.\[\&\>div\]\:univer-ring-transparent>div{--univer-tw-ring-color: transparent}
.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-right-2{right:.5rem}.univer-top-\[19px\]{top:19px}.univer--mx-2{margin-left:-.5rem;margin-right:-.5rem}.-univer-mt-2{margin-top:-.5rem}.univer-mb-1{margin-bottom:.25rem}.univer-mb-3{margin-bottom:.75rem}.univer-ml-1{margin-left:.25rem}.univer-ml-3{margin-left:.75rem}.univer-mr-1{margin-right:.25rem}.univer-mt-3{margin-top:.75rem}.univer-mt-4{margin-top:1rem}.univer-mt-5{margin-top:1.25rem}.univer-box-border{box-sizing:border-box}.univer-flex{display:flex}.univer-inline-flex{display:inline-flex}.univer-grid{display:grid}.univer-size-4{width:1rem;height:1rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-h-8{height:2rem}.univer-w-16{width:4rem}.univer-w-\[287px\]{width:287px}.univer-w-fit{width:fit-content}.univer-w-full{width:100%}.univer-cursor-move{cursor:move}.univer-cursor-pointer{cursor:pointer}.univer-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.univer-flex-row{flex-direction:row}.univer-flex-col{flex-direction:column}.univer-flex-wrap{flex-wrap:wrap}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-center{justify-content:center}.univer-justify-between{justify-content:space-between}.univer-gap-2{gap:.5rem}.univer-overflow-hidden{overflow:hidden}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-rounded-md{border-radius:.375rem}.\!univer-bg-gray-700{background-color:var(--univer-gray-700)!important}.univer-bg-white{background-color:var(--univer-white)}.univer-p-1{padding:.25rem}.univer-p-1\.5{padding:.375rem}.univer-p-2{padding:.5rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-px-2\.5{padding-left:.625rem;padding-right:.625rem}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-pb-4{padding-bottom:1rem}.univer-pr-9{padding-right:2.25rem}.univer-pt-2{padding-top:.5rem}.univer-text-base{font-size:1rem;line-height:1.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-font-medium{font-weight:500}.univer-leading-\[18px\]{line-height:18px}.univer-leading-\[22px\]{line-height:22px}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-opacity-50{opacity:.5}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-200{transition-duration:.2s}.hover\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\:univer-bg-gray-200:hover{background-color:var(--univer-gray-200)}.hover\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.hover\:univer-bg-primary-50:hover{background-color:var(--univer-primary-50)}.dark\:\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:\!univer-text-gray-300:where(.univer-dark,.univer-dark *){color:var(--univer-gray-300)!important}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:hover\:\!univer-bg-gray-800:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.\[\&\>div\:first-child\]\:univer-px-2\.5>div:first-child{padding-left:.625rem;padding-right:.625rem}.\[\&\>div\]\:univer-h-5>div{height:1.25rem}.\[\&\>div\]\:univer-ring-transparent>div{--univer-tw-ring-color: transparent}
.univer-relative{position:relative}.univer-mt-2\.5{margin-top:.625rem}.univer-box-border{box-sizing:border-box}.univer-size-4{width:1rem;height:1rem}.univer-h-5{height:1.25rem}.univer-h-6{height:1.5rem}.univer-h-7{height:1.75rem}.univer-h-8{height:2rem}.univer-h-full{height:100%}.univer-w-6{width:1.5rem}.univer-w-full{width:100%}.univer-w-px{width:1px}.univer-min-w-32{min-width:8rem}.univer-min-w-9{min-width:2.25rem}.univer-flex-1{flex:1}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.univer-items-center{align-items:center}.univer-justify-center{justify-content:center}.univer-gap-1{gap:.25rem}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-rounded-md{border-radius:.375rem}.univer-border{border-width:1px}.univer-border-solid{border-style:solid}.univer-border-none{border-style:none}.\!univer-bg-gray-800{background-color:var(--univer-gray-800)!important}.\!univer-bg-gray-900{background-color:var(--univer-gray-900)!important}.univer-bg-gray-100{background-color:var(--univer-gray-100)}.univer-bg-gray-200{background-color:var(--univer-gray-200)}.univer-bg-primary-50{background-color:var(--univer-primary-50)}.univer-bg-transparent{background-color:#0000}.univer-bg-white{background-color:var(--univer-white)}.univer-fill-primary-600{fill:var(--univer-primary-600)}.univer-p-0{padding:0}.univer-p-1{padding:.25rem}.univer-px-1{padding-left:.25rem;padding-right:.25rem}.univer-px-1\.5{padding-left:.375rem;padding-right:.375rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-text-left{text-align:left}.univer-text-center{text-align:center}.\!univer-text-primary-300{color:var(--univer-primary-300)!important}.univer-text-gray-700{color:var(--univer-gray-700)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-600{color:var(--univer-primary-600)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-shadow-sm{--univer-tw-shadow: 0px 1px 2px 0px #1e284d14;--univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 2px #1e284d14;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.disabled\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:univer-opacity-40:disabled{opacity:.4}.dark\:\!univer-border-gray-700:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-700)!important}.dark\:\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:\!univer-bg-gray-800:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.dark\:\!univer-bg-gray-900:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.dark\:\!univer-text-gray-100:where(.univer-dark,.univer-dark *){color:var(--univer-gray-100)!important}.dark\:\!univer-text-primary-300:where(.univer-dark,.univer-dark *){color:var(--univer-primary-300)!important}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:hover\:\!univer-bg-gray-800:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}.\[\&\>div\]\:univer-grid>div{display:grid}.\[\&\>div\]\:univer-gap-2>div{gap:.5rem}.univer-flex{display:flex}.univer-grid{display:grid}.univer-hidden{display:none}.univer-flex-col{flex-direction:column}.univer-justify-end{justify-content:flex-end}.univer-gap-2{gap:.5rem}.univer-border-t{border-top-width:1px}.univer-border-gray-200{border-color:var(--univer-gray-200)}.univer-py-2{padding-top:.5rem;padding-bottom:.5rem}.univer-pt-3{padding-top:.75rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-600{color:var(--univer-gray-600)}.univer-text-red-500{color:var(--univer-red-500)}.dark\:\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}
.univer-relative{position:relative}.univer-mt-4{margin-top:1rem}.univer-mt-6{margin-top:1.5rem}.univer-flex{display:flex}.univer-inline-flex{display:inline-flex}.univer-cursor-pointer{cursor:pointer}.univer-items-center{align-items:center}.univer-justify-between{justify-content:space-between}.univer-gap-2{gap:.5rem}.univer-text-center{text-align:center}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.univer-absolute{position:absolute}.univer-relative{position:relative}.-univer-bottom-0\.5{bottom:-.125rem}.-univer-right-0\.5{right:-.125rem}.univer-mx-1{margin-left:.25rem;margin-right:.25rem}.univer-mb-1{margin-bottom:.25rem}.univer-mb-2{margin-bottom:.5rem}.univer-ml-1{margin-left:.25rem}.univer-mt-2{margin-top:.5rem}.univer-mt-4{margin-top:1rem}.univer-box-border{box-sizing:border-box}.univer-block{display:block}.univer-inline-block{display:inline-block}.univer-flex{display:flex}.univer-inline-flex{display:inline-flex}.univer-grid{display:grid}.univer-hidden{display:none}.univer-size-3{width:.75rem;height:.75rem}.univer-size-6{width:1.5rem;height:1.5rem}.univer-size-full{width:100%;height:100%}.univer-h-4{height:1rem}.univer-h-5{height:1.25rem}.univer-h-7{height:1.75rem}.univer-h-8{height:2rem}.univer-h-\[300px\]{height:300px}.univer-h-full{height:100%}.univer-max-h-\[500px\]{max-height:500px}.univer-min-h-\[300px\]{min-height:300px}.univer-w-\[400px\]{width:400px}.univer-w-full{width:100%}.univer-flex-1{flex:1}.univer-flex-shrink{flex-shrink:1}.univer-flex-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-cursor-pointer{cursor:pointer}.univer-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.univer-flex-col{flex-direction:column}.univer-flex-nowrap{flex-wrap:nowrap}.univer-items-center{align-items:center}.univer-justify-start{justify-content:flex-start}.univer-justify-center{justify-content:center}.univer-justify-between{justify-content:space-between}.univer-gap-1{gap:.25rem}.univer-gap-2{gap:.5rem}.univer-gap-4{gap:1rem}.univer-overflow-auto{overflow:auto}.univer-overflow-hidden{overflow:hidden}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-whitespace-nowrap{white-space:nowrap}.univer-rounded-full{border-radius:9999px}.univer-rounded-lg{border-radius:.5rem}.univer-rounded-md{border-radius:.375rem}.univer-border{border-width:1px}.univer-border-solid{border-style:solid}.univer-border-\[rgba\(13\,13\,13\,0\.06\)\]{border-color:#0d0d0d0f}.univer-border-transparent{border-color:#0000}.univer-bg-gray-300{background-color:var(--univer-gray-300)}.univer-bg-white{background-color:var(--univer-white)}.univer-p-0\.5{padding:.125rem}.univer-p-2{padding:.5rem}.univer-p-4{padding:1rem}.univer-px-1\.5{padding-left:.375rem;padding-right:.375rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-0{padding-top:0;padding-bottom:0}.univer-py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.univer-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.univer-pl-5{padding-left:1.25rem}.univer-pr-0\.5{padding-right:.125rem}.univer-pr-2{padding-right:.5rem}.univer-pt-2{padding-top:.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-font-bold{font-weight:700}.univer-text-\[\#418F1F\]{--univer-tw-text-opacity: 1;color:rgba(65,143,31,var(--univer-tw-text-opacity, 1))}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.hover\:univer-ring-2:hover{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.hover\:univer-ring-offset-2:hover{--univer-tw-ring-offset-width: 2px}.hover\:univer-ring-offset-white:hover{--univer-tw-ring-offset-color: var(--univer-white)}.dark\:\!univer-border-\[rgba\(255\,255\,255\,0\.06\)\]:where(.univer-dark,.univer-dark *){border-color:#ffffff0f!important}.dark\:\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\:\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:\!univer-text-gray-200:where(.univer-dark,.univer-dark *){color:var(--univer-gray-200)!important}.dark\:\!univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)!important}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.\[\&\:hover_a\]\:univer-inline-block:hover a{display:inline-block}
.univer-ml-px{margin-left:1px}.univer-min-h-1{min-height:.25rem}.univer-min-w-1{min-width:.25rem}.univer-bg-white{background-color:var(--univer-white)}.\!univer-text-sm{font-size:.875rem!important;line-height:1.25rem!important}.univer-shadow{--univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 1px 3px #0000001a,0 1px 2px -1px #0000001a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.dark\:\!univer-bg-gray-800:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-800)!important}
.univer-relative{position:relative}.univer-my-0{margin-top:0;margin-bottom:0}.univer-mb-2{margin-bottom:.5rem}.univer-mb-3{margin-bottom:.75rem}.univer-ml-1\.5{margin-left:.375rem}.univer-ml-2{margin-left:.5rem}.univer-ml-3{margin-left:.75rem}.univer-mt-4{margin-top:1rem}.univer-mt-5{margin-top:1.25rem}.univer-box-border{box-sizing:border-box}.univer-flex{display:flex}.univer-grid{display:grid}.univer-h-7{height:1.75rem}.univer-max-h-\[310px\]{max-height:310px}.univer-w-\[--radix-popper-anchor-width\]{width:var(--radix-popper-anchor-width)}.univer-w-full{width:100%}.univer-max-w-\[220px\]{max-width:220px}.univer-cursor-pointer{cursor:pointer}.univer-select-none{user-select:none}.univer-list-none{list-style-type:none}.univer-grid-flow-col{grid-auto-flow:column}.univer-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-center{justify-content:center}.univer-justify-between{justify-content:space-between}.univer-gap-1{gap:.25rem}.univer-gap-2{gap:.5rem}.univer-overflow-hidden{overflow:hidden}.univer-overflow-y-auto{overflow-y:auto}.univer-overflow-x-hidden{overflow-x:hidden}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-rounded{border-radius:.25rem}.univer-rounded-lg{border-radius:.5rem}.univer-rounded-md{border-radius:.375rem}.univer-border{border-width:1px}.univer-bg-white{background-color:var(--univer-white)}.univer-p-1{padding:.25rem}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-text-base{font-size:1rem;line-height:1.5rem}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-text-gray-700{color:var(--univer-gray-700)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.hover\:univer-text-red-500:hover{color:var(--univer-red-500)}.disabled\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:univer-divide-opacity-30:disabled>:not([hidden])~:not([hidden]){--univer-tw-divide-opacity: .3}.disabled\:univer-text-gray-800:disabled{color:var(--univer-gray-800)}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}
.univer-absolute{position:absolute}.univer-relative{position:relative}.univer-right-\[-3px\]{right:-3px}.univer-top-\[-3px\]{top:-3px}.univer-z-10{z-index:10}.-univer-mx-4{margin-left:-1rem;margin-right:-1rem}.-univer-mt-2{margin-top:-.5rem}.univer-mb-3{margin-bottom:.75rem}.univer-ml-1{margin-left:.25rem}.univer-ml-2{margin-left:.5rem}.univer-mr-1{margin-right:.25rem}.univer-mr-2{margin-right:.5rem}.univer-mt-1{margin-top:.25rem}.univer-mt-2{margin-top:.5rem}.univer-mt-3{margin-top:.75rem}.univer-mt-4{margin-top:1rem}.univer-box-border{box-sizing:border-box}.\!univer-flex{display:flex!important}.univer-flex{display:flex}.univer-inline-flex{display:inline-flex}.univer-size-2{width:.5rem;height:.5rem}.univer-size-3{width:.75rem;height:.75rem}.univer-size-4{width:1rem;height:1rem}.univer-size-5{width:1.25rem;height:1.25rem}.univer-size-full{width:100%;height:100%}.\!univer-h-\[150px\]{height:150px!important}.univer-h-10{height:2.5rem}.univer-h-2\.5{height:.625rem}.univer-h-40{height:10rem}.univer-h-5{height:1.25rem}.univer-h-60{height:15rem}.univer-h-7{height:1.75rem}.univer-h-8{height:2rem}.univer-h-9{height:2.25rem}.univer-h-\[180px\]{height:180px}.univer-h-full{height:100%}.univer-h-px{height:1px}.univer-max-h-\[180px\]{max-height:180px}.univer-w-1\/2{width:50%}.univer-w-52{width:13rem}.univer-w-8{width:2rem}.univer-w-\[400px\]{width:400px}.univer-w-full{width:100%}.univer-min-w-0{min-width:0}.univer-min-w-16{min-width:4rem}.univer-flex-1{flex:1}.univer-flex-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-flex-wrap{flex-wrap:wrap}.univer-items-center{align-items:center}.univer-justify-end{justify-content:flex-end}.univer-justify-between{justify-content:space-between}.univer-gap-2{gap:.5rem}.univer-gap-3{gap:.75rem}.univer-gap-4{gap:1rem}.univer-gap-6{gap:1.5rem}.univer-overflow-hidden{overflow:hidden}.univer-overflow-y-auto{overflow-y:auto}.univer-truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.univer-rounded-\[10px\]{border-radius:10px}.univer-rounded-lg{border-radius:.5rem}.univer-rounded-md{border-radius:.375rem}.univer-rounded-sm{border-radius:.125rem}.univer-border{border-width:1px}.univer-border-0{border-width:0}.univer-border-b{border-bottom-width:1px}.univer-border-solid{border-style:solid}.univer-border-none{border-style:none}.univer-border-blue-500{border-color:var(--univer-blue-500)}.univer-border-gray-200{border-color:var(--univer-gray-200)}.univer-bg-gray-200{background-color:var(--univer-gray-200)}.univer-bg-gray-400{background-color:var(--univer-gray-400)}.univer-bg-transparent{background-color:#0000}.univer-bg-white{background-color:var(--univer-white)}.univer-p-1{padding:.25rem}.univer-p-2{padding:.5rem}.univer-p-4{padding:1rem}.univer-p-px{padding:1px}.univer-px-2{padding-left:.5rem;padding-right:.5rem}.univer-px-4{padding-left:1rem;padding-right:1rem}.univer-py-1{padding-top:.25rem;padding-bottom:.25rem}.univer-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.univer-pb-3{padding-bottom:.75rem}.univer-pl-2{padding-left:.5rem}.univer-pt-2{padding-top:.5rem}.univer-text-left{text-align:left}.univer-text-center{text-align:center}.univer-text-sm{font-size:.875rem;line-height:1.25rem}.univer-text-xs{font-size:.75rem;line-height:1rem}.univer-leading-10{line-height:2.5rem}.univer-leading-9{line-height:2.25rem}.univer-leading-\[10px\]{line-height:10px}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-red-500{color:var(--univer-red-500)}.univer-text-white{color:var(--univer-white)}.univer-shadow-lg{--univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;--univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--univer-tw-ring-offset-shadow, 0 0 #0000),var(--univer-tw-ring-shadow, 0 0 #0000),var(--univer-tw-shadow)}.univer-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.univer-duration-200{transition-duration:.2s}.hover\:univer-border-primary-600:hover{border-color:var(--univer-primary-600)}.hover\:univer-bg-gray-100:hover{background-color:var(--univer-gray-100)}.focus\:univer-border-primary-600:focus{border-color:var(--univer-primary-600)}.focus\:univer-outline-none:focus{outline-offset:2px;outline:2px solid #0000}.focus\:univer-ring-2:focus{--univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);--univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),0 0 #0000;box-shadow:var(--univer-tw-ring-offset-shadow),var(--univer-tw-ring-shadow),var(--univer-tw-shadow, 0 0 #0000)}.disabled\:univer-cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:univer-text-gray-400:disabled{color:var(--univer-gray-400)}.dark\:\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\:\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-600)!important}.\[\&\>div\]\:univer-box-border>div{box-sizing:border-box}.\[\&\>div\]\:univer-h-2\.5>div{height:.625rem}
/**
 * Lycero Office Desktop
 * Copyright © 2026 ITAC AI Heavy Industries.
 * Original work Copyright © 2026 Mainfunc, Inc. (GenOffice, Apache-2.0).
 */
/* Per-app accent (excel-green family) + sheets-only tokens.
 * Chrome tokens (surface/text/border/…, AI panel --color-*) come from
 * @lycero/ui/tokens.css; nothing here may shadow those names. */
:root {
  --excel-green: #217346;
  --excel-green-dark: #185c37;
  --excel-green-soft: #e9f3ed;
  --accent: var(--excel-green);
  --accent-dark: var(--excel-green-dark);
  --accent-soft: var(--excel-green-soft);

  --surface-hover: #edf1ee;
  /* ribbon toggle states match the slides ribbon (--hover / --active-bg):
     neutral gray, not the app's green-tinted surface hover */
  --ribbon-hover: var(--color-bg-subtle);
  --ribbon-active: #eaeaea;
  --focus: rgb(33 115 70 / 24%);
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-small: var(--radius-4);
  --radius-medium: var(--radius-6);
  --shadow-panel: 0 8px 24px rgb(0 0 0 / 10%);
  --shadow-modal: 0 3px 30px rgb(0 0 0 / 8%);

  /* sheets-local chrome shades */
  --sheets-error: #b3261e;
  --sheets-ai-error: #c62828;
  --sheets-ai-error-border: rgb(198 40 40 / 45%);
  --sheets-ai-error-bg: rgb(198 40 40 / 8%);
  --sheets-notice-border: rgb(33 115 70 / 25%);
  --sheets-statusbar-bg: #f3f4f6;
  --sheets-statusbar-border: #e1e4e8;
  --sheets-statusbar-hover: rgb(0 0 0 / 8%);
  --sheets-zoom-slider: #8a8886;
  --sheets-focus-ring: rgb(35 36 37 / 20%);
  --sheets-shimmer-base: #666666;
  --sheets-shimmer-hi: #d9d9d9;
  --sheets-scroll-thumb: rgb(0 0 0 / 25%);
  --sheets-chip-bg: #f3f7f4;
  --sheets-member-bg: #f6f8f7;
  --sheets-member-ink: #5c6660;
  --sheets-validation-prompt-bg: #ffffe1;
  --sheets-validation-prompt-border: #808080;
  --sheets-validation-prompt-ink: #555;
  --sheets-validation-prompt-shadow: rgb(0 0 0 / 18%);

  /* content-side constants: charts, shapes and their selection chrome sit on
   * the paper-like grid and never follow the theme */
  --sheets-paper: #ffffff;
  --sheets-on-accent: #ffffff;
  --sheets-knob-dot: #ffffff;
  --sheets-chart-border: #c9cdd1;
  --sheets-chart-ink: #333;
  --sheets-chart-label: #555;
  --sheets-chart-label-dim: #888;
  --sheets-pie-label-in: #fff;
  --sheets-pie-label-out: #444;
  --sheets-pie-label-stroke: rgb(0 0 0 / 25%);
  --sheets-select-frame: var(--excel-green);
  /* Excel-blue grid overlays: formula-audit trace boxes (paired with the
   * #1f5aa8 arrows in trace-arrows.tsx) and page-break preview lines */
  --sheets-excel-blue: #1f5aa8;
  --sheets-excel-blue-bg: rgb(31 90 168 / 6%);
  --sheets-el-selected: #107c41;
  --sheets-float-btn-bg: rgb(255 255 255 / 92%);
  --sheets-shape-border: #aeb4b8;
  --sheets-shape-bg: rgb(255 255 255 / 94%);
  --sheets-shape-ink: #596068;
  --sheets-content-danger: #b42318;

  /* dark chips and black translucent masks/shadows hold in both themes */
  --sheets-chip-remove-bg: #000;
  --sheets-chip-remove-hover: #4b4e51;
  --sheets-chip-remove-ink: #fff;
  --sheets-toast-bg: rgb(35 35 37 / 92%);
  --sheets-toast-error-bg: rgb(196 49 75 / 95%);
  --sheets-toast-ink: #fff;
  --sheets-toast-ok: #34c759;
  --sheets-on-accent-hover: rgb(255 255 255 / 22%);
  --sheets-mask-bg: rgb(0 0 0 / 50%);
  --sheets-mask-bg-strong: rgb(0 0 0 / 50%);
  --sheets-shadow-drop: 0 6px 20px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 8%);
  --sheets-shadow-menu: 0 6px 20px rgb(0 0 0 / 18%);
  --sheets-shadow-pane: 0 4px 18px rgb(0 0 0 / 12%);
  --sheets-shadow-card: 0 1px 2px rgb(0 0 0 / 4%);
  --sheets-shadow-chart: 0 1px 3px rgb(0 0 0 / 12%);
  --sheets-shadow-copilot: 4px 0 16px rgb(24 60 40 / 5%);
  --sheets-shadow-badge: 0 2px 6px rgb(74 92 255 / 25%);
  --sheets-shadow-slicer: 0 6px 18px rgb(15 40 30 / 14%);
  --sheets-shadow-toast: 0 4px 16px rgb(0 0 0 / 18%);
  --sheets-shadow-composer: 0 6px 30px rgb(0 0 0 / 8%);

  /* Same stack as docs/slides — an Inter fallback here made ribbon labels
     render in a different face than the other apps on machines with Inter */
  font-family:
    'Segoe UI',
    -apple-system,
    BlinkMacSystemFont,
    var(--ui-cjk),
    sans-serif;
  color: var(--text);
  background: var(--surface);
  font-synthesis: none;
}

[data-theme='dark'] {
  --accent: #34a853;
  --accent-dark: #58b380;
  --accent-soft: #1d3328;
  --surface-hover: #333;
  --ribbon-hover: #333;
  --ribbon-active: #454545;
  --focus: rgb(52 168 83 / 40%);
  --shadow-panel: 0 8px 24px rgb(0 0 0 / 45%);
  --sheets-error: #e57373;
  --sheets-ai-error: #f28b82;
  --sheets-ai-error-border: rgb(242 139 130 / 45%);
  --sheets-ai-error-bg: rgb(242 139 130 / 12%);
  --sheets-notice-border: rgb(52 168 83 / 35%);
  --sheets-statusbar-bg: #252525;
  --sheets-statusbar-border: #3a3a3a;
  --sheets-statusbar-hover: rgb(255 255 255 / 10%);
  --sheets-zoom-slider: #777;
  --sheets-focus-ring: rgb(228 228 228 / 25%);
  --sheets-shimmer-base: #8a8a8a;
  --sheets-shimmer-hi: #d0d0d0;
  --sheets-scroll-thumb: rgb(255 255 255 / 28%);
  --sheets-chip-bg: #24312a;
  --sheets-member-bg: #2f2f2f;
  --sheets-member-ink: #a9b2ac;
  --sheets-validation-prompt-bg: #3c3826;
  --sheets-validation-prompt-border: #8f8663;
  --sheets-validation-prompt-ink: #f2ecd0;
  --sheets-validation-prompt-shadow: rgb(0 0 0 / 45%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not([data-theme='dark']) {
    --accent: #34a853;
    --accent-dark: #58b380;
    --accent-soft: #1d3328;
    --surface-hover: #333;
    --ribbon-hover: #333;
    --ribbon-active: #454545;
    --focus: rgb(52 168 83 / 40%);
    --shadow-panel: 0 8px 24px rgb(0 0 0 / 45%);
    --sheets-error: #e57373;
    --sheets-ai-error: #f28b82;
    --sheets-ai-error-border: rgb(242 139 130 / 45%);
    --sheets-ai-error-bg: rgb(242 139 130 / 12%);
    --sheets-notice-border: rgb(52 168 83 / 35%);
    --sheets-statusbar-bg: #252525;
    --sheets-statusbar-border: #3a3a3a;
    --sheets-statusbar-hover: rgb(255 255 255 / 10%);
    --sheets-zoom-slider: #777;
    --sheets-focus-ring: rgb(228 228 228 / 25%);
    --sheets-shimmer-base: #8a8a8a;
    --sheets-shimmer-hi: #d0d0d0;
    --sheets-scroll-thumb: rgb(255 255 255 / 28%);
    --sheets-chip-bg: #24312a;
    --sheets-member-bg: #2f2f2f;
    --sheets-member-ink: #a9b2ac;
    --sheets-validation-prompt-bg: #3c3826;
    --sheets-validation-prompt-border: #8f8663;
    --sheets-validation-prompt-ink: #f2ecd0;
    --sheets-validation-prompt-shadow: rgb(0 0 0 / 45%);
  }
}

/* UI CJK fonts per language (documentElement.lang is set at bootstrap and on switch);
 * the zh expansion must keep the historical stack byte-identical */
:root {
  --ui-cjk: 'PingFang SC', 'Microsoft YaHei';
}

:root:lang(ja) {
  --ui-cjk: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo';
}

:root:lang(ko) {
  --ui-cjk: 'Apple SD Gothic Neo', 'Malgun Gothic';
}

:root:lang(zh-TW) {
  --ui-cjk: 'PingFang TC', 'Microsoft JhengHei';
}

/* Cell-content font aliases (document data, theme-independent): without these,
 * Office sans families the OS lacks silently fall back to Chromium's serif
 * default on the grid canvas. local() keeps a real installed font first; the
 * bundled Carlito (metric-compatible with Calibri, shared via
 * @lycero/ui/fonts) guarantees Excel-matching widths before the
 * Helvetica/Arial approximations. Canvas fillText never triggers @font-face
 * downloads, so main.tsx loads these explicitly. */
@font-face {
  font-family: Aptos;
  src:
    local('Aptos'), local('Calibri'), local('Carlito'),
    url('./Carlito-Regular-Cbe9FLjp.ttf'), local('Helvetica Neue'), local('Arial');
  font-display: block;
}

@font-face {
  font-family: Aptos;
  font-weight: bold;
  src:
    local('Aptos Bold'), local('Calibri Bold'), local('Carlito Bold'),
    url('./Carlito-Bold-BhbXr__n.ttf'), local('Helvetica Neue Bold'), local('Arial Bold');
  font-display: block;
}

@font-face {
  font-family: Aptos;
  font-style: italic;
  src:
    local('Aptos Italic'), local('Calibri Italic'), local('Carlito Italic'),
    url('./Carlito-Italic-KkZUqxJW.ttf'), local('Helvetica Neue Italic'),
    local('Arial Italic');
  font-display: block;
}

@font-face {
  font-family: Aptos;
  font-weight: bold;
  font-style: italic;
  src:
    local('Aptos Bold Italic'), local('Calibri Bold Italic'), local('Carlito Bold Italic'),
    url('./Carlito-BoldItalic-0dXjwGA0.ttf'), local('Helvetica Neue Bold Italic'),
    local('Arial Bold Italic');
  font-display: block;
}

/* 'Aptos Narrow' lives in CELL_FONT_ALIASES (cell-font-fallback.ts): a CSS
 * face here would shadow the width-corrected substitute for italic runs.
 * Italics synthesize from the corrected upright faces. */

@font-face {
  font-family: Carlito;
  src: local('Carlito'), url('./Carlito-Regular-Cbe9FLjp.ttf');
  font-display: block;
}

@font-face {
  font-family: Carlito;
  font-weight: bold;
  src: local('Carlito Bold'), url('./Carlito-Bold-BhbXr__n.ttf');
  font-display: block;
}

@font-face {
  font-family: Carlito;
  font-style: italic;
  src: local('Carlito Italic'), url('./Carlito-Italic-KkZUqxJW.ttf');
  font-display: block;
}

@font-face {
  font-family: Carlito;
  font-weight: bold;
  font-style: italic;
  src: local('Carlito Bold Italic'), url('./Carlito-BoldItalic-0dXjwGA0.ttf');
  font-display: block;
}

@font-face {
  font-family: Calibri;
  src:
    local('Calibri'), local('Carlito'), url('./Carlito-Regular-Cbe9FLjp.ttf'),
    local('Helvetica Neue'), local('Arial');
  font-display: block;
}

@font-face {
  font-family: Calibri;
  font-weight: bold;
  src:
    local('Calibri Bold'), local('Carlito Bold'), url('./Carlito-Bold-BhbXr__n.ttf'),
    local('Helvetica Neue Bold'), local('Arial Bold');
  font-display: block;
}

@font-face {
  font-family: Calibri;
  font-style: italic;
  src:
    local('Calibri Italic'), local('Carlito Italic'), url('./Carlito-Italic-KkZUqxJW.ttf'),
    local('Helvetica Neue Italic'), local('Arial Italic');
  font-display: block;
}

@font-face {
  font-family: Calibri;
  font-weight: bold;
  font-style: italic;
  src:
    local('Calibri Bold Italic'), local('Carlito Bold Italic'),
    url('./Carlito-BoldItalic-0dXjwGA0.ttf'), local('Helvetica Neue Bold Italic'),
    local('Arial Bold Italic');
  font-display: block;
}

/* Hangul-named cell-font aliases ('맑은 고딕', '돋움') live in
 * CELL_FONT_ALIASES (cell-font-fallback.ts), which supports the per-script
 * width correction Malgun Gothic needs. */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 720px;
  min-height: 100vh;
  overflow: hidden;
  /* Grayscale antialiasing to match docs/slides: without it, same-weight text renders noticeably bolder on macOS */
  -webkit-font-smoothing: antialiased;
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

button:active:not(:disabled) {
  filter: brightness(0.92);
}

button:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.app-shell {
  display: grid;
  /* minmax(0, 1fr) column: the ribbon's min-content width must clip at the
     viewport instead of stretching the whole shell past it. */
  grid-template-columns: minmax(0, 1fr);
  /* header / body (AI panel + sheet column, status bar inside the sheet column) */
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
  background: var(--surface);
}

/* Go To arrow injected beside Univer's formula-bar Name Box (the
   defined-name selector) — see the ensure() effect in ExcelShell. */
.goto-in-bar {
  flex: none;
  align-self: stretch;
  padding: 0 6px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
}

.goto-in-bar:hover {
  background: var(--hover);
}

/* Go To dialog: defined-name list, one row per name with its ref. */
.goto-name-list {
  max-height: 180px;
  margin: 10px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.goto-name-list li + li {
  border-top: 1px solid var(--border);
}

.goto-name-list button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  text-align: left;
}

.goto-name-list button:hover {
  background: var(--surface-hover);
}

.goto-name-list button span {
  color: var(--text-muted);
}

.excel-header {
  position: relative;
  z-index: 10;
  /* same divider weight as the docs/slides ribbons: their --border-strong, no drop shadow */
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface);
}

/* The ribbon's dropdown popovers render inside this header, so their z-index
 * is trapped in the header's stacking context (z-index: 10) and they paint
 * under the grid's float layers — the slicer stack and the watch window, both
 * z-index: 1000 in the root stacking order (#1767; docs/slides don't
 * hit this because their .ribbon creates no stacking context). Raising the
 * popovers instead cannot work: .menu-select-drop and .sheets-color-pop are
 * both already 1000, a tie the float layers win on DOM order, and the shared
 * Dropdown's .gs-dd-pop (z-index: 80) is not header-hosted in sheets at all —
 * its sheets callers are dialogs, plus WorkbookVisuals, which portals to body.
 *
 * Scoped to a header-HOSTED popover, never to popover-ness in general: the
 * two classes here are what the ribbon actually emits (MenuSelect /
 * ShapeGallerySelect / EditableMenuSelect -> .menu-select-drop; the ribbon
 * color tools -> .sheets-color-pop inline — the .sheets-color-pop-portal
 * variant is a child of body and is never trapped). Keying on the host also
 * keeps the header under a dialog's dim backdrop: html.lycero-popover-open
 * also fires for the Dropdown/ColorDropdown inside Format Cells, Name
 * Manager, Pivot, Consolidate, Subtotal, Advanced Filter and Insert Function,
 * all under .dialog-backdrop (z-index: 40) — and "dialogs always dismiss the
 * popover first" covers only dialogs opened FROM a popover, not popovers
 * opened INSIDE a dialog. */
.excel-header:has(.menu-select-drop, .sheets-color-pop) {
  z-index: 1500;
}

.ribbon-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  /* tab-row text ink matches the ribbon band below */
  color: var(--text-primary);
  /* same tab-row metrics as PowerPoint's ribbon (slides app): 5px top inset, no
     bottom padding, no divider line — the row blends into the band below */
  padding: 5px 10px 0;
  background: var(--surface);
  /* the tab row doubles as the frameless-window drag region */
  -webkit-app-region: drag;
  user-select: none;
}

/* While a popover is open the row must deliver presses (drag regions swallow
   them), so outside-press dismissal can see presses on the blank band */
html.lycero-popover-open .ribbon-tabs {
  -webkit-app-region: no-drag;
}

/* standalone-window chrome insets; in a shell tab (mode=tab) the tab strip
   above owns the traffic lights / caption buttons */
.ribbon-tabs-mac {
  padding-left: 84px;
}

.ribbon-tabs-win {
  padding-right: 150px;
}

.ribbon-tabs > button:not(.qa-btn) {
  -webkit-app-region: no-drag;
  position: relative;
  border: 0;
  padding: 7px 9px 6px;
  /* inactive tab ink matches the ribbon band's #232425 (active stays green) */
  color: inherit;
  background: transparent;
  font-size: 13px;
  /* every tab label is semibold, not just the active one */
  font-weight: 600;
  /* transparent border keeps the row height; the visible underline is the
   * ::after below, sized to the label text rather than the padded button */
  border-bottom: 2.5px solid transparent;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
}

.ribbon-tabs-spacer {
  flex: 1;
}

.qa-sep {
  width: 1px;
  height: 16px;
  margin: 0 6px;
  background: var(--border-strong);
  flex-shrink: 0;
  align-self: center;
}

.ribbon-tabs .qa-btn {
  -webkit-app-region: no-drag;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* same box and 16px glyph as the slides ribbon's .qa-btn */
  width: 30px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  color: var(--text-primary);
  background: none;
  cursor: pointer;
}

.ribbon-tabs .qa-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.ribbon-tabs .qa-btn:hover:not(:disabled) {
  background: var(--ribbon-hover);
}

.ribbon-tabs .qa-btn:disabled {
  color: var(--text-tertiary);
  /* neutralize the global button:disabled opacity so the glyph reads exactly
     the shared quick-access gray of the docs and slides buttons */
  opacity: 1;
  cursor: default;
}

/* AutoSave toggle in the tab row — same knob as the docs/slides ribbons,
   with the Excel-green accent. */
.autosave-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  margin-left: 4px;
  margin-right: 4px;
  -webkit-app-region: no-drag;
  user-select: none;
}

.autosave-toggle input {
  display: none;
}

.autosave-knob {
  width: 26px;
  height: 14px;
  border-radius: 7px;
  background: var(--border-strong);
  position: relative;
  transition: background 0.15s;
}

.autosave-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sheets-knob-dot);
  transition: left 0.15s;
}

.autosave-toggle.on .autosave-knob {
  background: var(--accent);
}

.autosave-toggle.on .autosave-knob::after {
  left: 14px;
}

.autosave-text {
  font-size: 11px;
  /* same ink as the docs/slides autosave label */
  color: var(--text-dim);
  white-space: nowrap;
}

.workbook-status {
  max-width: min(360px, 30vw);
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hovering a tab tints the label, it doesn't paint a box */
.ribbon-tabs > button:not(.qa-btn):hover {
  color: var(--accent-dark);
}

.ribbon-tabs > button:not(.qa-btn).active {
  color: var(--accent-dark);
  font-weight: 600;
}

/* active underline: about the label's width (insets past the tab padding),
 * ends slightly rounded — same as the slides ribbon */
.ribbon-tabs > button:not(.qa-btn).active::after {
  position: absolute;
  right: 13px;
  bottom: -2.5px;
  left: 13px;
  height: 2.5px;
  border-radius: 1px;
  background: var(--accent);
  content: '';
}

/* Contextual tabs (Chart Design) stand out even while inactive, with a
   colored caption. */
.ribbon-tabs > button:not(.qa-btn).contextual {
  color: var(--accent-dark);
  font-weight: 600;
}

/* Ribbon: compact single band, hairline separators between
   groups, no group captions. */
.ribbon {
  display: flex;
  align-items: stretch;
  gap: 2px;
  /* ribbon text ink, a touch off the app's --text — same shade
     as the .inline-tools glyphs */
  color: var(--text-primary);
  /* band metrics shared with the slides ribbon */
  height: 80px;
  /* Groups must never shrink below content (they would paint over each
     other); anything past the window edge scrolls instead. */
  /* `scroll`, not `auto`: styled scrollbars are classic (non-overlay), so
     `scroll` keeps the 5px lane reserved even without overflow — the content
     area never changes and crossing the overflow threshold cannot cause a
     vertical layout jump (same reasoning as .ai-attachments). */
  overflow-x: scroll;
  overflow-y: hidden;
  /* Slim visible scrollbar so mouse users can reach overflowed groups
     (#55). Its 5px lane is carved out of the bottom
     padding, keeping the 80px band and the content area unchanged; Chromium
     paints a thumb only while the row actually overflows. */
  padding: 6px 12px 1px;
  background: var(--surface);
}

.ribbon::-webkit-scrollbar {
  height: 5px;
}

.ribbon::-webkit-scrollbar-track {
  background: transparent;
}

.ribbon::-webkit-scrollbar-thumb {
  border-radius: 2.5px;
  background: var(--sheets-scroll-thumb);
}

.ribbon-group {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 2px 8px;
}

/* group separator: a hairline inset from the band's top/bottom, like the slides
   ribbon's .ribbon-sep (a plain border-right would span the full 80px band).
   The 2px inset matches the groups' vertical padding, so the line spans exactly
   the tallest group content (the two 30px rows) — same inset across all three
   apps. */
.ribbon-group::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 2px;
  width: 1px;
  background: var(--border);
}

/* The AI group leads the band in every app: 4px side padding like the
   docs/slides .ribbon-group, so the Lycero mark sits at the same x. */
.ribbon-group:has(.ai-entry) {
  padding: 2px 4px;
}

.ribbon-group:last-child::after {
  display: none;
}

.ribbon-group-content {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  /* Fill the group's height (docs/slides .ribbon-group-items get this via
     flex: 1 in their column-direction groups): without it this wrapper sits at
     natural height, so a .large button's own align-self: stretch tops out
     ~4px short of the other apps' 64px and the whole stack rides higher. */
  align-self: stretch;
}

.ribbon-tool {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 58px;
  /* icon-beside-label rows match the slides ribbon's .rb-small */
  padding: 3px 8px;
  border-radius: var(--radius-small);
}

.ribbon-tool:not(.large):hover {
  background: var(--ribbon-hover);
}

/* Icon over label for the tall Insert-tab buttons — same metrics as the
   slides ribbon's .rb-big. */
.ribbon-tool.large {
  flex-direction: column;
  justify-content: center;
  /* content-hugged and centered, same box as the docs/slides .rb-big */
  gap: 4px;
  padding: 4px 7px 6px;
  text-align: center;
}

/* 12px like the docs/slides .rb-big: buttons `font: inherit` and sheets' body
   has no font-size, so label wrapper spans got a 16px line box. Declared with
   .as-button so it survives that rule's own later `font: inherit` shorthand. */
.ribbon-tool.as-button.large {
  font-size: 12px;
}

.ribbon-tool.large small {
  display: none;
}

.ribbon-tool.large strong {
  /* labels never wrap, the button hugs its content (slides .rb-big) — a
     two-line label would push the icon off the shared center line.
     Default line-height, not a compact 1.1: the label height feeds the
     icon-row flex, so it must match the docs/slides .rb-big label. */
  white-space: nowrap;
  font-size: 12px;
  font-weight: 400;
}

/* the tall buttons carry the ribbon's big 28px glyph; letterform glyphs
   (ƒx, $, θ, …) get a 23px face so their cap height (~16.5px) matches the
   ~17px ink of the drawn 28px svgs beside them, and a regular 400 weight —
   the base 600 paints ~2.4px stems at this size vs the svgs' 1.5px strokes */
.ribbon-tool.large .tool-symbol {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  font-size: 23px;
  font-weight: 400;
}

.ribbon-tool.large .tool-symbol svg {
  width: 28px;
  height: 28px;
}

/* icon + caret row of tall buttons: stretches across the button like the
   slides ribbon's .rb-big-icon, so hover/press paint it edge to edge while
   the label below stays outside */
.ribbon-tool.large .tool-icon-row {
  align-self: stretch;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 4px;
  padding: 3px 4px;
  margin: 0 -4px;
}

/* Hovering a tall button tints only its icon row — the label below
   stays outside the gray (slides .rb-big:hover .rb-big-icon) */
.ribbon-tool.large:not(.reserved):hover .tool-icon-row {
  background: var(--ribbon-hover);
}

.ribbon-tool.large.as-button:disabled:hover .tool-icon-row {
  background: transparent;
}

/* The active workbook view (View tab's Normal) shows a pressed state. */
.ribbon-tool:not(.large).is-current {
  background: var(--ribbon-active);
}

.ribbon-tool.large.is-current .tool-icon-row {
  background: var(--ribbon-active);
}

.ribbon-tool.accent {
  min-width: 96px;
}

/* AI feature buttons next to the entry: purple glyphs, label below */
.ribbon-tool.ai-entry .ai-feature-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--color-brand-secondary);
}

.ribbon-tool.ai-entry .ai-feature-icon svg {
  /* 24px renders the 24-unit viewBox 1:1, so the 1.5 stroke paints 1.5px,
     keeping the 1:16 stroke standard */
  width: 24px;
  height: 24px;
}

/* The AI entry buttons read as one piece: hover/press tint the whole button
   (icon + label together), unlike the other tall buttons where only the icon
   row is painted. */
.ribbon-tool.large.ai-entry:not(:disabled):hover {
  background: var(--ribbon-hover);
}

/* 4px matches the docs/slides .rb-big.ai-entry radius so the open-state plate
   reads identically across the three apps. */
.ribbon-tool.large.as-button.ai-entry {
  border-radius: 4px;
}

.ribbon-tool.large.as-button.ai-entry.active {
  /* neutral gray, shared with the docs/slides Lycero entries */
  background: var(--ribbon-active);
}

.ribbon-tool.large.ai-entry:hover .tool-icon-row,
.ribbon-tool.large.as-button.ai-entry.active .tool-icon-row {
  background: transparent;
}

/* ---- Compact ribbon (⌥⌘K / Ctrl+Alt+K), docs parity, see #362 ----
 * The middle density: the band stays and every command stays reachable, it
 * just drops the tall buttons to icon-only on a shorter band. The band keeps
 * its HARD-fixed height (switching tabs, including the contextual chart /
 * table / shape tabs, never resizes the row) and the horizontal scroll.
 * Small icon-beside-label rows keep their labels, like the docs compact band.
 */
.ribbon-compact .ribbon {
  /* Two px taller than the docs/slides/pdf band. This header's rows sit on
     * .5px offsets, and against the 5px classic scrollbar lane Chromium rounds
     * the scrolled content up: a 45px band offered 40, a 46px band measured
     * 41 on macOS but still read scrollHeight 43 on Linux, where the Review
     * tab's letterform glyphs (🧮 U+6587 🗨) sit on font-metric fractions no other
     * tab hits. 48px gives the rounded content room without moving anything
     * inside the band. */
  height: 48px;
  padding-top: 5px;
  padding-bottom: 1px;
  /* Linux fallback fonts carry emoji and CJK glyphs on line boxes up to
     ~2.5em tall (Noto Color Emoji's win metrics); left at `normal` they poke
     below the group boxes and read as scrollable overflow in a band that
     never scrolls vertically. Pinning the line box makes the layout
     independent of whichever font a distro picks. */
  line-height: 1.2;
}

.ribbon-compact .ribbon-tool.large {
  /* the label is taken out of flow entirely (below), so the button is just
     the icon row plus its padding; 1px of button padding (not 2) because the
     28px glyph + plate already fills the 34px content box to the exact px,
     and the group's .5px centering offsets round scrollHeight a pixel over */
  gap: 0;
  padding: 1px 5px;
}

.ribbon-compact .ribbon-tool.large .tool-icon-row {
  min-height: 22px;
  padding: 1px 3px;
  margin: 0 -2px;
}

/* Keep the label in the accessibility tree and in the DOM (Playwright's
 * hasText and getByRole(name) both read it) but take it out of the visual
 * flow. display: none here would strip the accessible name. */
.ribbon-compact .ribbon-tool.large > span:not(.tool-icon-row) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Groups centre on the shorter band. */
.ribbon-compact .ribbon-group {
  padding: 0 4px;
}

/* Stacked rows become single rows — the docs treatment of .rb-col: the font
 * group's two 30px control rows, the cut/copy/format-painter mini column,
 * the styles/theme row stacks and the Page Layout check columns all fit a
 * short band only side by side. */
.ribbon-compact .ribbon-rows,
.ribbon-compact .row-stack,
.ribbon-compact .styles-stack,
.ribbon-compact .check-column {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.ribbon-compact .tool-stack {
  grid-auto-flow: column;
}

/* The Insert tab's chart-type cluster is a 3×3 grid of 17px cells (53px
 * tall); transposed to two rows it fits with room to spare. */
.ribbon-compact .chart-grid {
  grid-template-columns: none;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
}

/* Bare colored ribbon glyphs — no chip background.
   Icon-beside-label rows use the slides ribbon's .rb-small icon size (14px);
   the tall .large buttons scale theirs up to 28px below. */
.tool-symbol {
  display: grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  /* ribbon glyphs share the toolbar ink (was Excel green) */
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

.tool-symbol svg {
  width: 14px;
  height: 14px;
}

/* Constant rendered stroke instead of proportional scaling: the 24-canvas
   svgs carry a 1.5-unit strokeWidth attr, so left alone a 28px glyph paints
   1.75px lines while a 14px row paints 0.875px hairlines. These overrides
   pin the painted stroke at ~1.5px for 20px+ glyphs and ~1.25px for the
   small 13-16px ones (a touch lighter so dense glyphs stay legible).
   stroke-width is in viewBox units: units = 24 / rendered-px × target-px. */
.tool-symbol svg {
  stroke-width: 2.15; /* 14px rows → 1.25px */
}

.ribbon-tool.large .tool-symbol svg {
  stroke-width: 1.3; /* 28px → ~1.5px */
}

.chart-grid .tool-symbol svg {
  stroke-width: 2.2; /* 13px → ~1.2px */
}

.chev path {
  stroke-width: 2.6; /* 10px caret → ~1.1px */
}

/* every inline-row glyph — toggles, dropdown triggers and labeled buttons —
   shares one size so icons sitting side by side read identically. 20px puts
   the padded 24-canvas ink (~61%) at ~12.5px, just under the docs ribbon's
   optical size (16-canvas at 18px ≈ 14px ink), sized to taste. */
.inline-tools .tool-symbol svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8; /* 20px → 1.5px */
}

.ribbon-tool.reserved .tool-symbol {
  color: var(--text-muted);
}

.ribbon-tool strong,
.ribbon-tool small {
  display: block;
  white-space: nowrap;
}

.ribbon-tool strong {
  /* label weight matches the slides ribbon's .rb-small (regular, not medium) */
  font-size: 12px;
  font-weight: 400;
}

.ribbon-tool small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 9px;
}

/* Narrow windows: drop the detail line first, before falling back to
   horizontal scrolling. */
@media (max-width: 1600px) {
  .ribbon-tool small {
    display: none;
  }

  .ribbon-tool,
  .ribbon-tool.accent {
    min-width: 0;
  }

  .ribbon-tool.compact-icon span:not(.tool-symbol) {
    display: none;
  }

  .ribbon {
    gap: 1px;
    /* keep the 6px 12px band padding: docs/slides never compact it, and a
       narrower inset shifts the shared Lycero entry 2px when switching apps */
  }

  .ribbon-group {
    padding: 2px 6px;
  }

  .number-format {
    min-width: 60px;
  }
}

.inline-tools {
  display: flex;
  align-items: center;
  gap: 3px;
  /* inline glyphs, letterforms and trigger labels share one ink color,
     a touch off the app's --text */
  color: var(--text-primary);
}

/* Two stacked control rows inside one group.
   Row spacing matches the slides ribbon's .rb-col (4px). */
.ribbon-rows {
  display: grid;
  gap: 4px;
  align-content: center;
  justify-items: start;
}

/* Cut / Copy / Format Painter column beside the tall Paste button. */
.tool-stack {
  display: grid;
  align-content: center;
  gap: 0;
}

.tool-stack button {
  display: grid;
  min-width: 24px;
  /* 3 stacked mini rows line up with one tall button, as in the slides ribbon's
     .rb-clip-col (cut / copy / format painter): 24×20 buttons, gap 0, 14px glyph */
  height: 20px;
  place-items: center;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-small);
  font-size: 14px;
}

.tool-stack button:hover {
  background: var(--ribbon-hover);
}

.tool-stack button.is-active,
.tool-stack button.is-active:hover {
  background: var(--ribbon-active);
}

.inline-tools button.labeled {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  font-size: 12px;
  white-space: nowrap;
}

.select-like,
.number-format {
  display: inline-flex;
  align-items: center;
  /* control metrics from the slides ribbon's .rb-font-btn: 28px tall,
     0 7px padding, 13px type */
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 7px;
  background: var(--surface);
  font-size: 13px;
}

.select-like {
  min-width: 104px;
}

.select-like.compact {
  min-width: 44px;
}

/* font family / size dropdowns share the slides ribbon's fixed widths
   (.rb-font-name 178px / .rb-font-size 68px) instead of sizing to the
   longest option */
.select-like.font-name {
  width: 178px;
  min-width: 0;
}

.select-like.font-size {
  width: 68px;
  min-width: 0;
}

/* the font combos are buttons inside .inline-tools, whose flat-toggle reset
   (border: none / transparent) outranks the base .select-like chrome — put
   the combobox border back on just these two; .compact triggers stay flat */
.select-like.font-name,
.select-like.font-size {
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.number-format {
  min-width: 76px;
}

.inline-tools span,
.inline-tools button {
  display: grid;
  /* compact toggle metrics from the slides ribbon's .rb-icon */
  min-width: 28px;
  height: 30px;
  place-items: center;
  /* UA button padding would widen every 28px toggle; triggers that need
     horizontal padding get it back via .menu-select > .select-like /
     .labeled below */
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-small);
  font-size: 15px;
}

.inline-tools span:hover,
.inline-tools button:hover {
  background: var(--ribbon-hover);
}

/* Selection echo: the active cell's B/I/U/S state shows as pressed
   toggles (same neutral pressed gray as the slides ribbon). */
.inline-tools button.is-active,
.inline-tools button.is-active:hover {
  background: var(--ribbon-active);
}

/* alignment glyphs use the shared 15px inline size (slides .rb-icon) */

/* the glyph span nested inside a toggle / trigger / swatch must not re-apply
   the 28px toggle box (the `.inline-tools span` rule above also matches it),
   or every icon button inflates to 28px content + UA button padding ≈ 40px;
   width auto drops the 20px glyph box so the svg size rules above govern */
.inline-tools .tool-symbol {
  min-width: 0;
  width: auto;
  height: auto;
}

/* Color swatches: the glyph is the SAME size as its siblings (15px letter /
   18px svg) so the row's cap line stays level, and the 16×4 bar hangs below
   it out of flow (docs' colored-icon pattern) instead of pushing the whole
   stack taller than the neighbouring glyphs. */
.inline-tools .swatch-letter {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  height: auto;
  line-height: 1;
  font-size: 15px;
  font-weight: 700;
}

.swatch-letter i {
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 4px;
  border-radius: 1px;
}

/* the 24-canvas svgs carry ~3px of box padding below their ink — tuck the
   bar into it so it hugs the glyph like it hugs the letterforms */
.swatch-letter .tool-symbol ~ i {
  top: calc(100% - 3px);
}

.ribbon-tool.as-button {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.ribbon-tool.as-button:not(.large):hover {
  background: var(--ribbon-hover);
}

.ribbon-tool.as-button:not(.large).active {
  background: var(--ribbon-active);
}

.ribbon-tool.large.as-button.active .tool-icon-row {
  background: var(--ribbon-active);
}

.ribbon-tool.as-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.ribbon-tool.as-button:disabled:hover {
  background: transparent;
}

/* Reserved ribbon slots that are not implemented yet. */
.ribbon-tool.reserved {
  opacity: 0.45;
  cursor: default;
}

.ribbon-tool.reserved:hover {
  background: transparent;
}

/* dropdown chevron svg (copied from the slides ribbon's RbCaret) */
.chev {
  flex-shrink: 0;
  margin-left: 3px;
  color: var(--text-muted);
  vertical-align: -1px;
}

/* View tab's stacked show/hide checkboxes (the Show group). */
/* Home Styles group: three stacked dropdown rows. Muted via color, not
 * opacity — opacity spans the subtree and would render the anchored
 * .menu-select-drop popups translucent. */
.styles-stack {
  display: grid;
  gap: 1px;
  color: var(--text-secondary);
}

.styles-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 4px;
  font-size: 12px;
  white-space: nowrap;
}

/* row icons keep a compact box so labels stay close, with the slides
   ribbon's .rb-small 14px svg size; letterform fallbacks match at 13px */
.styles-row .tool-symbol {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  font-size: 13px;
}

.styles-row b {
  font-weight: 400;
}

/* Stacked small command rows beside a large button (Insert/Formulas tabs). */
.row-stack {
  display: grid;
  gap: 1px;
  align-content: center;
  justify-items: start;
}

/* Clickable rows keep the same small type as reserved ones (the generic
   .styles-row.as-button rule resets font to the page default). */
.ribbon .styles-row.as-button {
  font-size: 12px;
  padding: 1px 4px;
  color: inherit;
}

.ribbon .styles-row.as-button:hover {
  color: inherit;
  background: var(--ribbon-hover);
  border-radius: var(--radius-small);
}

.styles-row.reserved {
  opacity: 0.45;
}

/* Invisible native select stretched over its host, so a styled row or large
   button gets a real dropdown menu. */
.cover-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

/* ── MenuSelect: custom dropdown replacing native selects ──────────────────
   The panel is fixed + anchored below its trigger (slides .rb-drop pattern),
   so it escapes the ribbon's scroll clip and never covers ribbon content.
   anchor-scope keeps each panel bound to its own wrap. */

.menu-select {
  position: relative;
  display: inline-flex;
  anchor-name: --menu-select;
  anchor-scope: --menu-select;
}

/* Anchor positioning for the shared Word-style color panel (@lycero/ui
   .gcp-palette draws the chrome; this only places it under its trigger). */
.sheets-color-pop {
  position: fixed;
  position-anchor: --menu-select;
  top: calc(anchor(bottom) + 4px);
  left: anchor(left);
  position-try-fallbacks:
    flip-inline,
    flip-block,
    flip-inline flip-block;
  position-visibility: anchors-visible;
  z-index: 1000;
}

/* body-portal variant for transformed/clipping hosts (Univer float DOM);
   left/top are set inline against the trigger's viewport rect */
.sheets-color-pop-portal {
  position: fixed;
  z-index: 960;
}

/* plain color-well trigger (dialog / task-pane color pickers); the current
   color is painted as an inline background on the button */
.color-well {
  width: 48px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  cursor: pointer;
}

.color-well:disabled {
  opacity: 0.4;
  cursor: default;
}

/* invisible trigger stretched over the host tool (old cover-select markup) */
.menu-select-cover {
  position: absolute;
  inset: 0;
}

/* combobox-look trigger: a button wearing the old select's classes */
.menu-select > .select-like {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: 28px;
  /* restore the trigger inset that the .inline-tools button padding reset strips */
  padding: 0 7px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: inherit;
}

.menu-select .menu-select-value {
  display: inline;
  min-width: 0;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* the `.inline-tools span` toggle rule would bump this to 15px — keep the
     trigger label on the button's 12px ribbon type */
  font: inherit;
}

/* compact triggers hold an icon beside a short label — flex keeps the pair
   centered; the wide font/number combos stay inline so their labels keep
   ellipsizing */
.select-like.compact .menu-select-value {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* editable combobox trigger (font name/size, #160): a span wearing the
   .select-like chrome hosting a free-text input + caret button */
.menu-select > .menu-select-edit {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: 28px;
  padding: 0 4px 0 7px;
  cursor: text;
}

.menu-select-edit input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  font-size: 12px;
  outline: none;
}

.menu-select .menu-select-edit .menu-select-caret {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 16px;
  width: 16px;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.menu-select-drop {
  position: fixed;
  position-anchor: --menu-select;
  top: calc(anchor(bottom) + 4px);
  left: anchor(left);
  /* near the right window edge, right-align to the trigger */
  position-try-fallbacks: flip-inline;
  /* trigger scrolled out of the ribbon → hide the panel with it */
  position-visibility: anchors-visible;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 148px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--sheets-shadow-drop);
}

.menu-select-drop button {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  border: none;
  background: none;
  text-align: left;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text);
  white-space: nowrap;
}

.menu-select-drop button:hover {
  background: var(--ribbon-hover);
}

.menu-select-drop button.on {
  background: var(--ribbon-hover);
  font-weight: 600;
}

/* group break above the enumerated system fonts */
.menu-select-drop button.sep-above {
  border-top: 1px solid var(--border-strong);
  border-radius: 0 0 4px 4px;
  margin-top: 4px;
}

/* Insert tab shape gallery: grouped preview grid inside the dropdown */
.shape-gallery-drop {
  width: 322px;
  max-height: 420px;
}

.shape-gallery-title {
  padding: 6px 6px 2px;
  font-size: 11px;
  color: var(--text-dim);
}

.shape-gallery-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.menu-select-drop .shape-gallery-grid button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 5px 0;
  color: var(--text);
}

/* Insert tab's small chart-type buttons, arranged as an icon cluster. */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 26px);
  gap: 1px;
  align-content: center;
}

/* the 26×17 grid cells hold a 13px icon */
.chart-grid .tool-symbol {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
}

.chart-grid .tool-symbol svg {
  width: 13px;
  height: 13px;
}

.chart-grid button,
.chart-grid span {
  display: grid;
  height: 17px;
  place-items: center;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-small);
  font-size: 11px;
}

.chart-grid button:hover {
  background: var(--surface-hover);
}

.chart-grid .reserved {
  opacity: 0.45;
  cursor: default;
}

.check-column {
  display: grid;
  gap: 2px;
  align-content: center;
}

/* The View tab's Show group holds five toggles. Stacked in one column they
   need 83px and the ribbon band has 75px, so the last one — the
   cross-highlight toggle — was sliced off by the band's overflow clip.
   Two columns fit with room to spare. */
.check-column.check-column-view {
  grid-template-columns: repeat(2, max-content);
  column-gap: 14px;
}

/* Page Layout's Gridlines/Headings column captions. */
.check-head {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  padding: 1px 6px;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--text);
  font-size: 11px;
  text-align: left;
}

button.check-item:hover {
  background: var(--surface-hover);
}

.check-box {
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 9px;
  font-style: normal;
}

.reserved-check {
  opacity: 0.45;
}

/* Interface scale (issue #1913).
 *
 * Each chrome surface opts in on its own, and the workbook canvas
 * (`.workbook-area` / `#univer-container`) is deliberately NOT on this list.
 * That is the mechanism: the document zoom is the app's own per-app state, and
 * the interface scale is applied to its *siblings*. They cannot compound,
 * because nothing contains both.
 *
 * `zoom` rather than a window zoom for the same reason — see
 * apps/shell/src/main/ui-scale.ts for why `webContents.setZoomFactor()` would
 * drag the canvas along with the chrome. */
.excel-header,
.status-bar,
.copilot {
  zoom: var(--ui-scale);
}

/* AI panel on the left, spanning from the ribbon to the status bar (unified with docs);
 * its column is drag-resizable: driven by --copilot-width (updated by the AiChatPanel resizer) */
.sheet-body {
  display: grid;
  /* The AI panel's slot has to grow with the scale as well. Its column is
   * `--copilot-width`, and `.copilot` is `zoom`ed, so a 2x panel inside an
   * unscaled 360px slot paints 720px of content into 360px of grid — the
   * heading clips, the composer overlaps the model name, and both overflow
   * into the document. */
  grid-template-columns: calc(var(--copilot-width, 360px) * var(--ui-scale)) minmax(0, 1fr);
  min-height: 0;
  transition: grid-template-columns 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* formula-bar row + spreadsheet */
.sheet-main {
  display: grid;
  /* workbook / status bar */
  grid-template-rows: minmax(0, 1fr) auto;
  /* The implicit column defaults to `min-width: auto`, i.e. its content's
   * min-content width — and the Univer canvas is far wider than the window.
   * So the column grew past the window, and the status bar, sharing it, ran off
   * the right edge with the zoom controls past the frame. Invisible at 100%
   * because nothing else pushes that column; a large interface scale makes the
   * sheet's own chrome demand the width it no longer has. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.workbook-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Same reason as `.sheet-main`: the canvas's intrinsic width must not become
   * this grid's minimum. */
  min-width: 0;
  min-height: 0;
  position: relative;
}

.workbook-opening-screen {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 14px;
}

.csv-empty-notice {
  position: absolute;
  z-index: 20;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--sheets-notice-border);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
}

.csv-empty-notice span {
  flex: 1;
}

.csv-empty-notice button {
  border: 1px solid var(--sheets-notice-border);
  border-radius: 4px;
  padding: 4px 8px;
  background: var(--surface);
  color: var(--accent-dark);
  cursor: pointer;
}

.csv-empty-notice button.csv-empty-notice-close {
  border: 0;
  background: transparent;
  font-size: 16px;
}

/* ================= status bar (unified with docs/slides) ================= */

.status-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  height: 24px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: var(--sheets-statusbar-bg);
  border-top: 1px solid var(--sheets-statusbar-border);
}

.status-left {
  display: flex;
  align-items: center;
  gap: 10px;
  /* The message is the part that gives way at a large interface scale: it is
   * prose with a natural end, so an ellipsis reads as "more of this" rather
   * than as a control that vanished. `min-width: 0` is what lets a flex item
   * shrink past its content at all. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-msg {
  display: block;
  min-width: 0;
  opacity: 0.85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Formula view (sheetView/@showFormulas) is a per-sheet state that a save
 * persists, so a sheet can open showing formulas instead of values. The flag
 * keeps saying so for as long as the sheet is in that mode: the one-off toast
 * that announced the switch is gone long before anyone notices. */
.status-flag {
  flex: none;
  padding: 0 6px;
  border-radius: var(--radius-small);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--sheets-chip-bg);
  white-space: nowrap;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 6px;
  /* The zoom slider and the sheet counters stay whole. With both sides pinned
   * the bar ran past the window edge at 200% with the zoom percentage half
   * off-screen, which is why `.status-left` above is allowed to shrink. */
  flex-shrink: 0;
}

.zoom-btn {
  border: none;
  background: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  line-height: 1;
}

.zoom-btn:hover {
  background: var(--sheets-statusbar-hover);
}

.zoom-slider {
  width: 110px;
  accent-color: var(--sheets-zoom-slider);
  height: 3px;
}

.zoom-value {
  min-width: 38px;
  text-align: right;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0 4px;
  height: 20px;
  border-radius: 3px;
  cursor: pointer;
}

.zoom-value:hover,
.view-btn:hover {
  background: var(--sheets-statusbar-hover);
}

.view-btn {
  border: none;
  background: none;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
  width: 22px;
  height: 20px;
  border-radius: 3px;
  line-height: 1;
}

.view-btn[aria-checked='true'] {
  background: var(--accent-soft);
  color: var(--accent);
}

.view-switch {
  display: flex;
  gap: 2px;
  margin-right: 6px;
}

.status-stats-menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-menu);
}

.status-stats-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.status-stats-menu button:hover {
  background: var(--hover);
}

.zoom-dialog .zoom-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 8px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.zoom-dialog .zoom-choices legend {
  padding: 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}

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

.zoom-dialog .zoom-custom input[type='number'] {
  width: 64px;
  margin-left: 6px;
}

.app-shell.copilot-collapsed .sheet-body {
  grid-template-columns: 34px minmax(0, 1fr);
}

/* sidebar setting off: the rail is not mounted, so the sheet takes the whole row */
.app-shell.copilot-off .sheet-body {
  grid-template-columns: minmax(0, 1fr);
}

.sheet-main {
  position: relative;
}

/* the grid stays ltr under an RTL UI: Univer inherits this through ctx.direction */

.spreadsheet {
  direction: ltr;
  min-width: 0;
  min-height: 0;
  background: var(--surface);
}

/* Outline (Group) gutter: strips beside the grid, sized by the deepest level. */
.workbook-area.has-outline {
  grid-template-columns: var(--outline-gutter-w, 0px) minmax(0, 1fr);
}

.workbook-area.has-outline > .spreadsheet {
  grid-area: 1 / 2;
}

.outline-gutter {
  display: block;
  position: absolute;
  z-index: 1;
  background: var(--surface-subtle);
  user-select: none;
}

/* Fills the reserved grid column; absolute so its bitmap never sizes the grid. */
.outline-gutter-rows {
  inset: 0 auto 0 0;
  width: var(--outline-gutter-w, 0px);
  height: 100%;
}

/* Sits in the top band of the (heightened) column header, over the grid canvas. */
.outline-gutter-cols {
  top: 0;
  left: 0;
  /* Above Univer's grid canvas (z 8), below floating chrome (z 20+). */
  z-index: 9;
}

/* Floating selection Ask AI entry and send-now popover (docs/slides parity). */
.ai-ask-trigger {
  position: fixed;
  z-index: 59;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-30);
  background: var(--surface);
  color: var(--color-ai-action);
  font-family: var(--gs-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  box-shadow: var(--sheets-shadow-menu);
  cursor: pointer;
}

.ai-ask-trigger:hover {
  background: var(--hover);
}

.ai-ask-pop {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--surface);
  box-shadow: var(--sheets-shadow-menu);
  font-family: var(--gs-font-sans);
}

.ai-ask-pop-title {
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
}

.ai-ask-pop-sub {
  margin-top: -4px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.ai-ask-pop-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  outline: none;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 14px;
}

.ai-ask-pop-input:focus {
  border-color: var(--accent);
}

.ai-ask-pop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-ask-chip {
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-30);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 12.5px;
  cursor: pointer;
}

.ai-ask-chip:hover {
  background: var(--hover);
  color: var(--color-text-primary);
}

.ai-ask-pop-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ai-ask-cancel,
.ai-ask-confirm {
  padding: 6px 12px;
  border-radius: var(--radius-6);
  font-size: 13px;
  cursor: pointer;
}

.ai-ask-cancel {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--color-text-secondary);
}

.ai-ask-confirm {
  border: 1px solid transparent;
  background: var(--color-ai-action);
  color: var(--color-ai-action-text);
}

.ai-ask-confirm:hover:not(:disabled) {
  background: var(--color-ai-action-hover);
}

.ai-ask-confirm:disabled {
  opacity: 0.45;
  cursor: default;
}

.copilot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-left: var(--ai-panel-border-left, 0px) solid var(--color-border-default);
  border-right: var(--ai-panel-border-right, 1px) solid var(--color-border-default);
  background: var(--color-bg-page);
  box-shadow: var(--sheets-shadow-copilot);
  font-family: var(--gs-font-sans);
  color: var(--color-text-primary);
}

/* Collapsed rail: identical to the slides .ai-rail — plain white strip,
 * hairline right border, no float shadow */
.copilot.collapsed {
  align-items: stretch;
  background: var(--color-bg-page);
  box-shadow: none;
}

/* drag handle on the panel's right edge — resize the panel horizontally
 * (.copilot is overflow: hidden, so the handle must sit fully inside the panel) */
.ai-panel-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
}

/* while dragging: keep the col-resize cursor everywhere, no text selection */
.ai-panel-resizing {
  cursor: col-resize;
  user-select: none;
}

.expand-copilot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 2px;
  border: none;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}

.expand-copilot:hover {
  background: var(--hover);
}

.expand-copilot span {
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ai-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid var(--color-border-default);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary);
}

.ai-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* AI entry points all use the app icon (shared by the collapse button and the AI panel title) */
.app-badge {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  box-shadow: var(--sheets-shadow-badge);
}

/* Lycero brand logo (shared by the collapse button and the AI panel title) */
.lycero-badge {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.ai-panel-title .lycero-badge {
  width: 18px;
  height: 18px;
}

.ai-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.ai-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  background: none;
  border-radius: var(--radius-8);
  color: var(--color-text-secondary);
  padding: 0;
  transition: all var(--transition-fast);
}

.ai-header-btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.ai-notice {
  margin: 10px 12px 0;
  padding: 7px 12px;
  border: 1px solid var(--sheets-notice-border);
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11.5px;
  line-height: 1.5;
}

.copilot-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px 8px;
  background: var(--surface);
}

.copilot-file {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copilot-file strong {
  font-weight: 600;
  color: var(--text);
}

textarea {
  min-height: 100px;
  resize: vertical;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-medium);
  padding: 10px;
  color: var(--text);
  background: var(--surface);
  line-height: 1.4;
}

textarea:focus {
  border-color: var(--accent);
}

.primary-action,
.secondary {
  min-height: 34px;
  border-radius: var(--radius-medium);
  padding: 7px 12px;
}

.primary-action {
  border: 1px solid var(--accent);
  color: var(--sheets-on-accent);
  background: var(--accent);
}

.primary-action:hover {
  background: var(--accent-dark);
}

.secondary {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.secondary:hover {
  background: var(--surface-hover);
}

.preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-medium);
  padding: 12px;
  background: var(--surface);
  box-shadow: var(--sheets-shadow-card);
}

.preview h3 {
  margin: 0;
  font-size: 13px;
}

.change {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 7px;
  font-size: 11px;
}

.change span {
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-body {
    transition: none;
  }
}

.xlsx-chart,
.xlsx-image,
.xlsx-shape,
.xlsx-visual-loading,
.xlsx-visual-unavailable {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Print snapshot handle: no box of its own, so the float lays out as before. */
.xlsx-print-visual {
  display: contents;
}

.xlsx-chart {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sheets-chart-border);
  background: var(--sheets-paper);
  box-shadow: var(--sheets-shadow-chart);
  color: var(--sheets-chart-ink);
  font-family: Calibri, 'Segoe UI', sans-serif;
}

.chart-edit-button {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--sheets-float-btn-bg);
  color: var(--text-muted);
  font-size: 13px;
}

.chart-edit-button:hover {
  color: var(--excel-green-dark);
  background: var(--sheets-paper);
}

.shape-editable .chart-edit-button {
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.chart-editor {
  position: absolute;
  inset: 6px 6px auto auto;
  z-index: 4;
  display: grid;
  gap: 6px;
  max-width: 230px;
  max-height: calc(100% - 12px);
  overflow: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-medium);
  padding: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  font-size: 11px;
}

.chart-editor label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.chart-editor input[type='text'],
.chart-editor .chart-editor-title,
.chart-editor select {
  min-width: 120px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 6px;
  font-size: 11px;
}

.chart-editor input[type='color'] {
  width: 34px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: none;
}

.chart-editor-series {
  display: grid;
  gap: 4px;
}

.chart-editor-series-name {
  color: var(--text-muted);
  font-size: 10px;
}

.chart-editor input.chart-editor-range {
  height: 22px;
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 6px;
  font-size: 11px;
}

.chart-editor-error {
  color: var(--danger);
  font-size: 10px;
  max-width: 210px;
}

/* Sticky footer: with many series the panel scrolls, but Apply/Cancel must
   stay reachable without scrolling to the end. */
.chart-editor-actions {
  position: sticky;
  bottom: -10px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: -2px -10px -10px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chart-editor-actions button {
  min-height: 24px;
  border-radius: var(--radius-small);
  padding: 2px 10px;
  font-size: 11px;
}

.chart-editor-cancel {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.chart-editor-apply {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--sheets-on-accent);
}

.xlsx-chart {
  position: relative;
}

.xlsx-chart figcaption {
  flex: 0 0 auto;
  padding: 10px 12px 2px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-svg {
  width: 100%;
  /* Wide anchors: without a height cap the aspect-derived height overflows
     the frame and clips the bottom axis rows (side-legend layouts). */
  max-height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}

/* SVG text sizes in viewBox units; --chart-pt (set per chart from the
   rendered frame) is one point, so labels stay at Excel's point size on
   any frame aspect. The *-pt / *-color properties carry the file's txPr;
   --chart-ink is the figure's readable ink over a dark chart area. */
.chart-svg text {
  fill: var(--chart-cat-color, var(--chart-ink, var(--sheets-chart-label)));
  font-size: calc(var(--chart-cat-pt, 9) * var(--chart-pt, 1px));
}

.chart-svg .axis-label {
  fill: var(--chart-val-color, var(--chart-ink, var(--sheets-chart-label-dim)));
  font-size: calc(var(--chart-val-pt, 9) * var(--chart-pt, 1px));
}

.chart-svg .data-label {
  fill: var(--chart-dlbl-color, var(--chart-ink, var(--sheets-chart-label-dim)));
  font-size: calc(var(--chart-dlbl-pt, 9) * var(--chart-pt, 1px));
}

/* Size container: the text below sizes in cq units so it follows the
   sheet zoom with the float box (--shape-px = one zoomed px). */
.xlsx-shape-drawn {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: size;
}

.xlsx-shape-drawn svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Rotated shape: the anchor box stores rotated bounds; the inner box
   restores the true frame (sized in cq units by the component), centered
   on the anchor center before the rotate. */
.xlsx-shape-rotated-inner {
  position: absolute;
  left: 50%;
  top: 50%;
}

.xlsx-shape-drawn .shape-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--shape-px, 1px) * 6);
  text-align: center;
  font-size: calc(var(--shape-px, 1px) * 12);
  color: var(--sheets-chart-ink);
  overflow: hidden;
}

/* File text boxes carry their own paragraph alignment and run styling;
   the flow column replaces the centered grid. */
.xlsx-shape-drawn .shape-text-rich {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  text-align: initial;
  padding: calc(var(--shape-px, 1px) * 4) calc(var(--shape-px, 1px) * 8);
}

.xlsx-shape-drawn .shape-anchor-t {
  justify-content: flex-start;
}

.xlsx-shape-drawn .shape-anchor-b {
  justify-content: flex-end;
}

/* bodyPr clip: Excel cuts the text at the inset edge, not the frame edge. */
.xlsx-shape-drawn .shape-text-clip {
  overflow: clip;
  overflow-clip-margin: content-box;
}

.shape-paragraph {
  display: block;
  white-space: pre-wrap;
  line-height: 1.3;
}

.shape-bullet {
  display: inline-block;
  white-space: pre;
  text-indent: 0;
}

.shape-editable {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: move;
  touch-action: none;
  outline: none;
}

/* Children (chart body) paint over an outline, so the selection frame is an
   overlay pseudo-element stacked above them. */
.shape-editable.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--sheets-select-frame);
  pointer-events: none;
  z-index: 1;
}

/* Selection handles: white dots on the frame, selected only. */
.shape-editable .shape-handle {
  position: absolute;
  display: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--sheets-select-frame);
  border-radius: 50%;
  background: var(--sheets-paper);
  box-sizing: border-box;
  z-index: 2;
}

.shape-editable.selected .shape-handle {
  display: block;
}

/* The float container clips its box, so handles sit just inside the frame. */
.shape-editable .handle-nw {
  top: -1px;
  left: -1px;
  cursor: nwse-resize;
}
.shape-editable .handle-n {
  top: -1px;
  left: calc(50% - 4px);
  cursor: ns-resize;
}
.shape-editable .handle-ne {
  top: -1px;
  right: -1px;
  cursor: nesw-resize;
}
.shape-editable .handle-e {
  top: calc(50% - 4px);
  right: -1px;
  cursor: ew-resize;
}
.shape-editable .handle-se {
  right: -1px;
  bottom: -1px;
  cursor: nwse-resize;
}
.shape-editable .handle-s {
  bottom: -1px;
  left: calc(50% - 4px);
  cursor: ns-resize;
}
.shape-editable .handle-sw {
  bottom: -1px;
  left: -1px;
  cursor: nesw-resize;
}
.shape-editable .handle-w {
  top: calc(50% - 4px);
  left: -1px;
  cursor: ew-resize;
}

/* Delete affordance of the SELECTED visual only. Portaled to <body> and
   placed just outside the frame's top-right corner (VisualDeleteButton
   positions it; the float container would clip anything outside the box),
   so it never covers a small picture the way the old in-frame button did.
   Same layer as the Ask AI trigger: above the grid, below dialogs. */
.shape-delete-button {
  position: fixed;
  z-index: 59;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  box-shadow: var(--sheets-shadow-menu);
  cursor: pointer;
}

.shape-delete-button:not([data-ready='true']) {
  visibility: hidden;
}

.shape-delete-button:hover {
  color: var(--sheets-content-danger);
  background: var(--hover);
}

/* Body-level clone shown while moving a visual: escapes the float
   container's overflow clipping so the drag preview stays above the grid. */
.shape-drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
}

.shape-editable .shape-resize-outline {
  position: absolute;
  top: 0;
  left: 0;
  border: 1.5px dashed var(--sheets-select-frame);
  box-sizing: border-box;
  pointer-events: none;
}

.shape-editable:has(> .shape-text-editor) {
  container-type: size;
}

.shape-text-editor {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--shape-px, 1px) * 6);
  text-align: center;
  font-size: calc(var(--shape-px, 1px) * 12);
  color: var(--sheets-chart-ink);
  outline: 2px solid var(--sheets-select-frame);
  outline-offset: -2px;
  cursor: text;
  overflow: hidden;
  white-space: pre-wrap;
}

.trace-precedent-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1.5px solid var(--sheets-excel-blue);
  background: var(--sheets-excel-blue-bg);
  pointer-events: none;
}

.trace-arrow-layer {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.data-validation-dropdown-button {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface-subtle);
  color: var(--text-muted);
  cursor: default;
  appearance: none;
}

.univer-z-10:has(.data-validation-dropdown-button),
.univer-z-10:has(.data-validation-input-message) {
  overflow: visible !important;
}

.univer-z-10:has(.data-validation-input-message) > .univer-overflow-hidden {
  overflow: visible !important;
}

/* Cell alert popup: the title row is fixed at 20px, so a wrapped title
   ("Number stored as text") overlaps the message. */
.univer-w-\[156px\].univer-shadow > .univer-h-5 {
  height: auto;
  min-height: 1.25rem;
  align-items: flex-start;
}

.univer-w-\[156px\].univer-shadow > .univer-h-5 > svg {
  flex: none;
  margin-top: 2px;
}

.data-validation-dropdown-button:hover {
  border-color: var(--border-hover);
  background: var(--hover);
  color: var(--text);
}

.data-validation-dropdown-button svg {
  width: 8px;
  height: 8px;
  display: block;
  fill: currentcolor;
  pointer-events: none;
}

.data-validation-input-message {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--sheets-validation-prompt-border);
  background: var(--sheets-validation-prompt-bg);
  box-shadow: 1px 1px 2px var(--sheets-validation-prompt-shadow);
  color: var(--sheets-validation-prompt-ink);
  font-family: inherit;
  font-size: 9px;
  line-height: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
  user-select: none;
  transform: translateY(4px);
}

.data-validation-input-message-title {
  font-weight: 600;
}

.page-break-line {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.page-break-outline {
  border: 2px solid var(--sheets-excel-blue);
}

.page-break-row {
  border-top: 2px dashed var(--sheets-excel-blue);
}

.page-break-col {
  border-left: 2px dashed var(--sheets-excel-blue);
}

.page-break-row.manual {
  border-top-style: solid;
}

.page-break-col.manual {
  border-left-style: solid;
}

.allow-edit-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.allow-edit-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.allow-edit-list li:last-child {
  border-bottom: none;
}

.allow-edit-name {
  font-weight: 600;
  min-width: 90px;
}

.allow-edit-ref {
  flex: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.dialog-actions-inline {
  margin-top: 8px;
}

.page-break-watermark {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.pie-layout {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 18px 18px;
}

.pie-svg {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

.pie-svg .pie-label-inside {
  font-size: 11px;
  fill: var(--sheets-pie-label-in);
  paint-order: stroke;
  stroke: var(--sheets-pie-label-stroke);
  stroke-width: 0.6px;
}

.pie-svg .pie-label-outside {
  font-size: 10px;
  fill: var(--chart-ink, var(--sheets-pie-label-out));
}

/* In-cell sparkline minicharts */
.sparkline-svg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Element-level chart selection (title / legend) */
.chart-el-selected {
  outline: 2px solid var(--sheets-el-selected);
  outline-offset: 1px;
  border-radius: 2px;
}

/* Chart context menu (portaled to body — the float DOM clips overflow) */
.chart-menu-backdrop {
  position: fixed;
  z-index: 4000;
  inset: 0;
}

.chart-menu {
  position: fixed;
  z-index: 4001;
  display: flex;
  min-width: 168px;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--sheets-shadow-menu);
}

.chart-menu button {
  padding: 6px 12px;
  border: none;
  background: none;
  border-radius: 4px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.chart-menu button:hover {
  background: var(--surface-hover);
}

/* Chart format pane, docked to the right edge as a task pane */
.chart-format-pane {
  position: fixed;
  z-index: 900;
  top: 140px;
  right: 12px;
  bottom: 40px;
  display: flex;
  width: 250px;
  flex-direction: column;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--sheets-shadow-pane);
  font-size: 12px;
  gap: 10px;
}

.chart-format-pane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

.chart-format-pane header button {
  border: none;
  background: none;
  font-size: 14px;
  cursor: pointer;
}

.chart-format-pane .pane-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.chart-format-pane .pane-section > strong {
  font-size: 11px;
  color: var(--text-secondary);
}

.chart-format-pane label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chart-format-pane input[type='number'],
.chart-format-pane input[type='text'],
.chart-format-pane select {
  width: 120px;
  padding: 3px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 12px;
}

.chart-format-pane input[type='range'] {
  width: 110px;
}

/* Select Data dialog */
.select-data-dialog {
  width: 560px;
}

/* Combo mode: two extra columns (series type, secondary axis). */
.select-data-dialog.combo {
  width: 720px;
}

.select-data-rows {
  display: flex;
  max-height: 300px;
  flex-direction: column;
  overflow-y: auto;
  gap: 6px;
}

.select-data-row {
  display: grid;
  align-items: center;
  grid-template-columns: 1.1fr 1.4fr 1.4fr auto;
  gap: 6px;
}

.select-data-row.combo {
  grid-template-columns: 1fr 1.15fr 1.15fr 0.75fr auto auto;
}

.select-data-head {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.select-data-row input {
  min-width: 0;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
}

.select-data-row input:focus {
  outline: none;
  border-color: var(--accent);
}

.select-data-row input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.select-data-row select {
  min-width: 0;
  height: 26px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
}

.select-data-row select:focus {
  outline: none;
  border-color: var(--accent);
}

.select-data-row input[type='checkbox'] {
  justify-self: center;
  height: auto;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--accent);
}

.select-data-row > span:last-child {
  display: flex;
  gap: 4px;
}

.select-data-row button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-small);
  font-size: 12px;
  color: var(--text-muted);
}

.select-data-row button:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.select-data-actions {
  display: flex;
  padding-top: 8px;
  gap: 8px;
}

.select-data-actions button {
  padding: 0 14px;
}

.select-data-actions button:hover:not(:disabled) {
  background: var(--surface-hover);
}

/* Legend placement around the pie (right is the classic default). */
.pie-legend-bottom {
  flex-direction: column;
}

.pie-legend-top {
  flex-direction: column-reverse;
}

/* Excel lays top/bottom pie legends out as a wrapping row, not a column. */
.pie-legend-bottom > .chart-legend,
.pie-legend-top > .chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
}

.pie-legend-left {
  flex-direction: row-reverse;
}

/* Legend placement for axis charts; default keeps the legacy below-chart row. */
.chart-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.chart-body > .chart-svg {
  min-height: 0;
  flex: 1 1 auto;
}

.chart-body.chart-legend-default > .chart-legend,
.chart-body.chart-legend-bottom > .chart-legend,
.chart-body.chart-legend-top > .chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  padding: 0 10px 6px;
}

.chart-body.chart-legend-top {
  flex-direction: column-reverse;
}

.chart-body.chart-legend-right,
.chart-body.chart-legend-left {
  align-items: center;
}

.chart-body.chart-legend-right {
  flex-direction: row;
}

.chart-body.chart-legend-left {
  flex-direction: row-reverse;
}

.chart-body.chart-legend-right > .chart-legend,
.chart-body.chart-legend-left > .chart-legend {
  flex: 0 0 auto;
  padding: 0 12px;
}

.chart-svg .axis-title {
  font-size: calc(var(--chart-title-pt, 10) * var(--chart-pt, 1px));
  fill: var(--chart-title-color, var(--chart-ink, var(--sheets-chart-label)));
}

.chart-legend {
  display: grid;
  min-width: 0;
  gap: 4px;
  font-size: 10px;
}

.chart-legend span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.chart-legend i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
}

.xlsx-image {
  display: block;
  object-fit: contain;
}

/* a:srcRect crop: the frame clips an oversized img offset by the crop. */
.xlsx-image-crop {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.xlsx-image-crop img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Embedded OLE object without a cached preview: Excel's bordered box with a
 * document icon and the object's type caption, sized to the anchor. Shares
 * the shape chrome tokens (system window/windowText in Excel). */
.xlsx-ole-placeholder {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--sheets-shape-border);
  background: var(--sheets-shape-bg);
  color: var(--sheets-shape-ink);
  font:
    11px 'Segoe UI',
    sans-serif;
  text-align: center;
  user-select: none;
}

/* Cached preview picture: the VML frame/backdrop come inline from the file;
 * the picture fits inside like a plain xlsx-image. */
.xlsx-ole-frame {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.xlsx-ole-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.xlsx-ole-caption {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xlsx-slicer-placeholder {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--sheets-shape-border);
  background: var(--sheets-shape-bg);
  color: var(--sheets-shape-ink);
  font:
    700 11px 'Segoe UI',
    sans-serif;
  user-select: none;
}

.xlsx-slicer-caption {
  padding: 3px 6px;
  border-bottom: 1px solid var(--sheets-shape-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* In-cell rich-value picture: fits the cell box, aspect preserved (Excel). */
.xlsx-cell-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.xlsx-cell-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.xlsx-shape,
.xlsx-visual-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sheets-shape-border);
  background: var(--sheets-shape-bg);
  color: var(--sheets-shape-ink);
  font:
    12px 'Segoe UI',
    sans-serif;
  text-align: center;
}

.inline-tools .color-tool {
  position: relative;
  display: grid;
  /* same 28×30 box as the sibling toggles, so the row's 3px rhythm holds */
  min-width: 28px;
  height: 30px;
  place-items: center;
  cursor: pointer;
  border-radius: var(--radius-small);
  font-size: 12px;
}

.inline-tools .color-tool:hover {
  background: var(--ribbon-hover);
}

.inline-tools .color-tool input[type='color'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Format Cells dialog (⌘1) */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: var(--sheets-mask-bg);
  backdrop-filter: blur(4px);
}

.format-cells-dialog {
  display: grid;
  gap: 10px;
  /* The tab row cannot compress below its labels, and the single grid column
     sizes every row to that width — with a fixed 420px card, locales with
     long tab labels (fr 490px, pl 528px measured) paint the fields, lists and
     buttons past the card edge. Size the card to its widest incompressible
     row instead; 420px stays the floor (en fits at 407px, so en/zh keep
     today's exact size), the cap keeps small windows usable. The sample
     <output> keeps overflow: hidden, so a long cell value contributes no
     min-content and cannot widen the card. */
  width: min-content;
  min-width: 420px;
  max-width: min(92vw, 560px);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}

.encrypted-workbook-password-dialog {
  width: min(420px, calc(100vw - 32px));
  min-width: 0;
  gap: 14px;
  padding: 18px;
}

.format-cells-dialog.encrypted-workbook-password-dialog header {
  font-size: 15px;
}

.encrypted-workbook-password-dialog .dialog-body {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.encrypted-workbook-password-copy {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.encrypted-workbook-password-dialog label {
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.encrypted-workbook-password-dialog input[type='password'] {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  color: var(--text);
  background: var(--surface);
  font-size: 13px;
}

.encrypted-workbook-password-dialog input[type='password']:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--sheets-focus-ring);
}

.encrypted-workbook-password-dialog .dialog-error {
  margin: 0;
}

.format-cells-dialog header {
  font-size: 14px;
  font-weight: 600;
}

.dialog-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}

.dialog-tabs button {
  border: 0;
  padding: 5px 12px;
  background: transparent;
  font-size: 12px;
}

.dialog-tabs button.active {
  color: var(--accent-dark);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.dialog-body {
  min-height: 150px;
}

.dialog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dialog-grid label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.dialog-grid select,
.dialog-grid input:not([type='checkbox']):not([type='radio']) {
  /* Fill the grid cell; intrinsic input width would otherwise force
     narrow columns (e.g. the 3-column header/footer dialog) to overflow. */
  width: 100%;
  min-width: 0;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 6px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
}

.dialog-grid .dialog-check {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: end;
}

/* Autosave-recovery prompt (styled replacement for the native message box) */
.recovery-dialog {
  /* 400px was enough on macOS; Windows fonts/DPI plus a long filename
     blew the implicit grid column past the card, so Restore sat outside. */
  width: min(480px, calc(100vw - 32px));
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
}

.recovery-dialog .dialog-body,
.recovery-dialog .dialog-actions {
  min-width: 0;
}

.recovery-dialog .dialog-actions {
  flex-wrap: wrap;
}

.recovery-dialog .dialog-body {
  display: grid;
  gap: 10px;
  min-height: 0;
}

.recovery-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.recovery-heading h2 {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.recovery-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--accent-dark);
  background: var(--accent-soft);
}

.recovery-icon svg {
  width: 18px;
  height: 18px;
}

.recovery-body {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.recovery-file {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  padding: 8px 10px;
  background: var(--surface-subtle);
  font-size: 12px;
}

.recovery-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recovery-file-time {
  flex: none;
  color: var(--text-tertiary);
  font-size: 11px;
}

/* Format Cells → Number tab */
.numfmt-tab {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
}

.numfmt-cats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  align-self: start;
}

.numfmt-cats button {
  border: 0;
  padding: 4px 8px;
  background: transparent;
  border-radius: var(--radius-small);
  font-size: 12px;
  color: var(--text);
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.numfmt-cats button:hover:not(.active) {
  background: var(--surface-hover);
}

.numfmt-cats button.active {
  background: var(--accent);
  color: var(--sheets-on-accent);
}

.numfmt-body {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.numfmt-field {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.numfmt-field select,
.numfmt-field input {
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 6px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
}

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

.numfmt-body .dialog-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
}

.numfmt-sample output {
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  padding: 4px 6px;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.numfmt-list {
  display: flex;
  flex-direction: column;
  max-height: 138px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
}

.numfmt-list button {
  flex: 0 0 auto;
  border: 0;
  padding: 3px 8px;
  background: transparent;
  font-size: 12px;
  color: var(--text);
  text-align: start;
  white-space: nowrap;
}

.numfmt-list button:hover:not(.active) {
  background: var(--surface-hover);
}

.numfmt-list button.red {
  color: var(--danger);
}

.numfmt-list button.active {
  background: var(--accent);
  color: var(--sheets-on-accent);
}

.numfmt-note {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Lycero DS modal footer buttons: secondary = bg-subtle, primary = black (#232425) */
.dialog-actions button,
.select-data-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  /* .primary-action/.secondary set min-height: 34px globally; the DS sm size wins here */
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dialog-actions button:hover:not(:disabled),
.select-data-actions button:hover:not(:disabled) {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

.dialog-actions button:active:not(:disabled),
.select-data-actions button:active:not(:disabled) {
  filter: brightness(0.88);
  transform: scale(0.98);
}

.dialog-actions button:focus-visible,
.select-data-actions button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sheets-focus-ring);
}

.dialog-actions button:disabled,
.select-data-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dialog-actions button.primary,
.dialog-actions .primary-action,
.select-data-actions button.primary {
  border-color: var(--color-btn-primary);
  background: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
}

.dialog-actions button.primary:hover:not(:disabled),
.dialog-actions .primary-action:hover:not(:disabled),
.select-data-actions button.primary:hover:not(:disabled) {
  border-color: var(--color-btn-primary-hover);
  background: var(--color-btn-primary-hover);
  color: var(--color-btn-primary-text);
}

.dialog-actions button {
  min-width: 68px;
}

/* Consolidate dialog */
.dialog-grid .dialog-span {
  grid-column: 1 / -1;
}

.cells-dialog {
  min-width: 280px;
}

.cells-dialog-body {
  display: grid;
  gap: 8px;
  min-height: 0;
  font-size: 12px;
  color: var(--text);
}

/* Pivot dialog: long localized labels and stacked field rows outgrow the
   shared 420px card, so it gets its own bounds and a scrolling body. */
.format-cells-dialog.pivot-dialog {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: min(92vw, 640px);
  max-height: 88vh;
}

.pivot-dialog .dialog-grid {
  min-height: 0;
  overflow: auto;
}

/* fieldsets don't shrink below min-content unless min-width is reset */
.pivot-dialog .dialog-grid fieldset {
  min-width: 0;
}

.input-row {
  display: flex;
  gap: 6px;
}

.input-row input {
  flex: 1;
  min-width: 0;
}

.reference-list {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 130px;
  overflow-y: auto;
}

.reference-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 3px 6px;
}

/* Insert Function dialog */
.insert-function-dialog {
  width: 460px;
}

.fn-filter-row {
  display: flex;
  gap: 8px;
}

.fn-filter-row input {
  flex: 1;
}

.fn-list {
  display: flex;
  flex-direction: column;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.fn-row {
  display: grid;
  gap: 2px;
  padding: 5px 8px;
  border: none;
  border-bottom: 1px solid var(--surface-subtle);
  background: var(--surface);
  text-align: left;
  font-size: 12px;
}

.fn-row span {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fn-row:hover {
  background: var(--surface-hover);
}

.fn-syntax {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fn-row.active {
  background: var(--accent-soft);
}

.fn-syntax code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

.dialog-floating {
  position: fixed;
  top: 120px;
  right: 24px;
  z-index: 40;
}

.function-args-dialog {
  width: 460px;
  min-width: 0;
  box-shadow: var(--shadow-menu);
}

.function-args-dialog.collapsed {
  width: 360px;
}

.fn-args-name {
  margin: 0;
  font-weight: 600;
}

.fn-args-rows {
  display: grid;
  gap: 6px;
  max-height: 40vh;
  overflow-y: auto;
}

.fn-args-row {
  display: grid;
  grid-template-columns: 110px 1fr 120px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.fn-args-row label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}

.fn-args-row label.required {
  font-weight: 700;
  color: var(--text);
}

.fn-args-row output {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

.fn-args-pick {
  flex: none;
  padding: 2px 8px;
}

.fn-args-call-result {
  margin: 0;
  min-height: 1.2em;
  text-align: right;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

.fn-args-result {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

/* Insert Symbol dialog */
.symbol-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.symbol-grid button {
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 16px;
  line-height: 1;
}

.symbol-grid button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* Insert Screenshot dialog */
.screenshot-dialog {
  width: 520px;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.screenshot-grid button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 11px;
}

.screenshot-grid button:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.screenshot-grid button.capturing {
  opacity: 0.6;
}

.screenshot-grid img {
  width: 100%;
  height: 84px;
  object-fit: contain;
}

.screenshot-grid span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Insert Icons dialog */
.icons-dialog {
  width: 560px;
}

.icons-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px 0;
}

.icons-toolbar input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-size: 12px;
}

.icons-colors {
  display: flex;
  gap: 4px;
}

.icons-colors button {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.icons-colors button.active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.icons-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.icons-grid button {
  display: grid;
  place-items: center;
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background: none;
  font-size: 24px;
}

.icons-grid button:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* Equation dialog */
.equation-dialog {
  width: 560px;
}

.equation-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.equation-presets button {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: none;
  font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', serif;
  font-size: 13px;
}

.equation-presets button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.equation-latex {
  width: 100%;
  margin-top: 10px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

.equation-preview {
  display: grid;
  place-items: center;
  min-height: 90px;
  margin-top: 10px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
}

.equation-error {
  padding: 0 12px;
  color: var(--danger);
  font-size: 12px;
}

/* Recommended Charts dialog */
.recommended-charts-dialog {
  width: 640px;
  max-width: min(92vw, 640px);
}

.recommended-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.recommended-charts-grid button {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface);
  text-align: left;
  font-size: 11px;
}

.recommended-charts-grid button:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.recommended-charts-grid svg {
  width: 100%;
  height: auto;
  background: var(--surface);
}

.recommended-charts-grid span {
  color: var(--text-secondary);
}

/* Insert/Edit Link dialog */
.link-dialog {
  width: 420px;
}
.link-dialog .dialog-body label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
.link-dialog .dialog-body input {
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 13px;
}

/* Sort / Remove Duplicates dialogs */
.sort-dialog {
  width: 420px;
}
.sort-dialog .dialog-note,
.format-cells-dialog .dialog-note {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.format-cells-dialog .dialog-note {
  grid-column: 1 / -1;
}
.name-manager-dialog {
  width: 520px;
}
.name-manager-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
  font-size: 12px;
}
.name-manager-table th,
.name-manager-table td {
  text-align: left;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.name-manager-table tbody tr {
  cursor: pointer;
}
.name-manager-table tbody tr.selected {
  background: var(--accent-soft);
}
.name-manager-empty {
  color: var(--text-muted);
}
.dialog-error {
  color: var(--sheets-error);
}
.sort-header-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 10px;
}
.sort-level {
  display: grid;
  grid-template-columns: 60px 1fr 90px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}

.styles-row.as-button {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  padding: 0;
}
.styles-row.as-button:hover {
  color: var(--accent-dark);
}

/* AI settings modal (ported from apps/docs' SettingsModal, excel-green themed) */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--sheets-mask-bg-strong);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  width: 440px;
  background: var(--surface);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow-modal);
}

.modal h2 {
  margin: 0 0 16px;
  font-size: 17px;
}

.modal label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.modal input,
.modal select {
  display: block;
  width: 100%;
  margin-top: 4px;
  height: 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 10px;
  font-size: 13px;
  outline: none;
  background: var(--surface);
}

.modal input:focus,
.modal select:focus {
  border-color: var(--accent);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.btn-primary {
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: var(--sheets-on-accent);
  font-size: 13px;
  cursor: pointer;
}

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

.btn-ghost {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 12px;
}

.btn-ghost:hover {
  background: var(--surface-hover);
}

.provider-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.provider-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 12.5px;
  cursor: pointer;
  color: inherit;
}

.provider-tab:hover {
  border-color: var(--accent);
}

.provider-tab-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

.provider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- AI chat panel ---- */

.ai-chat {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  /* uniform 16px flex gap between blocks, messages carry no margin */
  gap: 16px;
  overflow-y: auto;
  padding: 32px 16px;
  font-family: var(--gs-font-sans);
}

/* Boundary between the restored transcript and the live turn */
.ai-history-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: 14px;
  color: var(--color-text-tertiary);
}

.ai-chat-empty {
  margin-top: 36px;
  padding: 0 10px;
  text-align: center;
}

.ai-chat-empty-title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.ai-chat-empty-body {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}

/* Chat messages (scaled to the 14px panel): user = gray pill, AI = plain text without a bubble, no accent colors */
.ai-msg {
  position: relative;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* User pill: gray, fully rounded (no tail) */
.ai-msg-user {
  align-self: flex-end;
  color: var(--color-text-primary);
  background: var(--color-bg-subtle);
  padding: 8px 16px;
  border-radius: 14px;
  max-width: 80%;
  line-height: 1.5;
}

.ai-msg-assistant {
  align-self: stretch;
  border: none;
  background: none;
  padding: 0;
  max-width: 100%;
  color: var(--color-text-primary);
  white-space: normal;
}

.ai-msg-error {
  border-color: var(--sheets-ai-error-border);
  color: var(--sheets-ai-error);
}

.ai-md p,
.ai-md ul,
.ai-md ol {
  margin: 0 0 16px;
}

.ai-md :last-child {
  margin-bottom: 0;
}

/* blank markdown paragraphs would each eat a 16px margin — the stream never renders them */
.ai-md p:empty {
  display: none;
}

.ai-md .ai-md-h {
  font-weight: 700;
  line-height: 1.3;
  margin: 20px 0 8px;
}

.ai-md .ai-md-h:first-child {
  margin-top: 0;
}

.ai-md ul,
.ai-md ol {
  margin-bottom: 20px;
  padding-left: 20px;
}

.ai-md li {
  margin-left: 20px;
  line-height: 28px;
}

/* inline code: neutral gray chip (deliberately not red), 2px below body size */
.ai-md code {
  border-radius: 4px;
  padding: 1px 6px;
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
  font-size: 14px;
}

/* in-answer citation links: click jumps the grid to the cited cell/range */
.ai-md .ai-md-nav {
  color: var(--accent);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* Collapsible tool-activity group.
   Unlike docs/slides, this app renders the group BEFORE the reply text, so the
   gap to the surrounding content comes from margin-bottom, not margin-top. */
.ai-work-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
}

.ai-msg-assistant .ai-work-group:last-child,
.ai-work-group:only-child {
  margin-bottom: 0;
}

.ai-work-group-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-work-group-summary:hover {
  color: var(--color-text-secondary);
}

.ai-work-group-summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sheets-focus-ring);
  border-radius: 4px;
}

.ai-work-group-summary.running {
  color: var(--color-text-secondary);
}

.ai-work-group-summary.running .ai-work-group-label {
  animation: ai-summary-pulse 1500ms linear infinite;
}

@keyframes ai-summary-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.ai-work-group-body {
  align-self: stretch;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-work-group-body.open {
  grid-template-rows: 1fr;
}

.ai-work-group-body-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 0 0 8px;
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-work-group-body.open .ai-work-group-body-inner {
  padding: 4px 0 8px 8px;
}

/* Step rows inside the group: 20px icon slot + 1px connector */
.ai-step-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  color: var(--color-text-tertiary);
  animation: ai-row-ease-in 320ms ease-out;
}

.ai-step-row:not(:last-child) {
  padding-bottom: 16px;
}

.ai-step-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 9.5px;
  top: 32px;
  bottom: -4px;
  width: 1px;
  background: var(--color-border-default);
}

.ai-step-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
}

.ai-step-icon.done {
  color: var(--color-text-secondary);
}

.ai-step-icon.error {
  color: var(--sheets-ai-error);
}

.ai-step-icon.running svg {
  animation: ai-hourglass-flip 1.8s ease-in-out infinite;
}

@keyframes ai-hourglass-flip {
  0%,
  12% {
    transform: rotate(0);
  }
  44%,
  56% {
    transform: rotate(180deg);
  }
  88%,
  100% {
    transform: rotate(360deg);
  }
}

.ai-step-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 1px;
}

.ai-step-title {
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text-secondary);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
}

.ai-step-title.clickable {
  cursor: pointer;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-step-title.clickable:hover {
  color: var(--color-text-primary);
}

.ai-step-title.clickable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sheets-focus-ring);
  border-radius: 4px;
}

/* Step detail opens instantly, no animation */
.ai-step-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-step-row,
  .ai-step-icon.running svg,
  .ai-work-group-summary.running .ai-work-group-label {
    animation: none;
  }
}

/* Running tool row: two grow/shrink brand dots */
.ai-tool-chip-spinner {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}

.ai-tool-chip-spinner::before,
.ai-tool-chip-spinner::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-brand-secondary);
}

.ai-tool-chip-spinner::before {
  animation: ai-tool-dot-grow 2s infinite;
}

.ai-tool-chip-spinner::after {
  animation: ai-tool-dot-shrink 2s infinite;
}

@keyframes ai-tool-dot-grow {
  0%,
  100% {
    transform: scale(0.333);
    opacity: 0.45;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes ai-tool-dot-shrink {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.333);
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-tool-chip-spinner::before,
  .ai-tool-chip-spinner::after {
    animation: none;
    opacity: 0.65;
  }
}

/* Elapsed run time next to the typing indicator */
.ai-typing-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.ai-elapsed {
  font-size: 14px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* caret: text glyph right after the label, always visible, rotates open */
.ai-tool-chip-caret {
  margin-left: 4px;
  opacity: 0.7;
  display: inline-block;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-tool-chip-caret.open {
  transform: rotate(90deg);
}

/* stream rows ease in */
@keyframes ai-row-ease-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* expanded step detail: subtle gray card, no border */
.ai-tool-output {
  background: var(--color-bg-subtle);
  border: none;
  border-radius: 12px;
  font-family: var(--gs-font-mono, 'Be Vietnam Pro', 'Segoe UI', 'Cascadia Mono', Consolas, sans-serif);
  font-size: 14px;
  color: var(--color-text-primary);
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

.ai-tool-output-pre {
  padding: 12px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* Inline "Applied N edits [Undo]" banner shown after auto-apply */
.ai-auto-applied {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.ai-auto-applied-text {
  color: var(--text-secondary);
  font-size: 12px;
}

.ai-undo-btn {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 11.5px;
  cursor: pointer;
  transition: background 0.1s;
}

.ai-undo-btn:hover {
  background: var(--accent);
  color: var(--sheets-on-accent);
  border-color: var(--accent);
}

/* Thinking indicator (white background, no container):
 * phase one = two bouncing blue dots (alternating small/large); phase two = shimmering "Thinking…" text + streaming caret block */
.ai-typing {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
  font-size: 15px;
} /* Thinking indicator: shimmer label above two grow/shrink dots */
.ai-typing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
}

.ai-typing-label {
  display: inline-block;
  position: relative;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--sheets-shimmer-base);
  -webkit-text-fill-color: transparent;
  background: var(--sheets-shimmer-base)
    linear-gradient(
      to left,
      var(--sheets-shimmer-base),
      var(--sheets-shimmer-hi) 50%,
      var(--sheets-shimmer-base)
    );
  background-clip: text;
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  background-size: 70% 100%;
  animation: ai-thinking-shimmer 1.2s infinite alternate linear;
}

.ai-typing-elapsed {
  font-variant-numeric: tabular-nums;
}

@keyframes ai-thinking-shimmer {
  0% {
    background-position: -100% top;
  }
  100% {
    background-position: 250% top;
  }
}

.ai-typing-dots {
  height: 12px;
  display: flex;
  gap: 2px;
}

.ai-typing-dot-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12px;
}

.ai-typing-dot-grow,
.ai-typing-dot-shrink {
  background: var(--color-brand-secondary);
  border-radius: 50%;
}

.ai-typing-dot-grow {
  animation: ai-dot-grow 2s infinite;
}

.ai-typing-dot-shrink {
  animation: ai-dot-shrink 2s infinite;
}

@keyframes ai-dot-grow {
  0%,
  100% {
    width: 4px;
    height: 4px;
    opacity: 0.45;
  }
  50% {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
}

@keyframes ai-dot-shrink {
  0%,
  100% {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
  50% {
    width: 4px;
    height: 4px;
    opacity: 0.45;
  }
}

/* streaming caret at the tail of streaming assistant text */
.ai-msg-streaming .ai-md > :last-child::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--color-text-secondary);
  vertical-align: text-bottom;
  animation: ai-caret-blink 900ms steps(1, end) infinite;
}

@keyframes ai-caret-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-typing-label,
  .ai-msg-streaming .ai-md > :last-child::after {
    animation: none;
  }
}

.ai-preview-card {
  align-self: stretch;
}

/* Composer floats over the chat scroll area — no top border (agent-shell §4.6) */
.ai-composer {
  border-top: none;
  padding: 8px 12px 12px;
  background: var(--color-bg-page);
}

/* composer card — 16px radius, default border, production float shadow */
.ai-input-box {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-16);
  background: var(--color-bg-page);
  box-shadow: var(--sheets-shadow-composer);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* textarea: 16px / 24px fixed line-height (chat body size), auto-grow band
 * (resting height 25% taller than default, matching the Lycero for PowerPoint prompt box) */
.ai-input-box textarea {
  display: block;
  width: 100%;
  resize: none;
  border: none;
  background: none;
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  /* vertical gaps live on margin, not padding: textarea padding scrolls away
   * with the content, so clipped lines would sit flush against chips/footer */
  padding: 0 14px;
  margin: 12px 0 4px;
  font-size: 14px;
  line-height: 24px;
  outline: none;
  color: var(--color-text-primary);
  min-height: 48px;
  max-height: 168px;
  overflow-y: auto;
}

.ai-input-box textarea:focus,
.ai-input-box textarea:focus-visible {
  border-color: transparent;
  box-shadow: none;
}

.ai-input-box textarea::placeholder {
  color: var(--color-text-tertiary);
}

.ai-input-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 8px 10px;
}

.ai-input-hint {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* icon-only enter key: transparent button chrome, visuals come from brand-supplied PNGs
 * (gray arrow = disabled, black arrow = enabled), size stays 36×36 */
.ai-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-left: auto;
  flex-shrink: 0;
  border: none;
  border-radius: 35%;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-send-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.ai-send-btn:hover:not(:disabled) {
  filter: brightness(0.92);
}

.ai-send-btn:active:not(:disabled) {
  filter: brightness(0.88);
  transform: scale(0.98);
}

.ai-send-btn:disabled {
  cursor: default;
  /* the send-enter-off art already encodes the disabled look;
     without this the global button:disabled 0.48 opacity washes it out vs slides */
  opacity: 1;
}

/* Stop button while generating: brand-supplied art (white square on black), transparent button chrome */
.ai-send-btn.ai-stop-btn {
  background: transparent;
}

.ai-send-btn.ai-stop-btn:hover {
  filter: brightness(0.92);
}

/* ─── Chat attachments (📎 button + chips, same structure as docs/slides AI panels) ── */

/* attach — brand-supplied paperclip art, 20×20 (5/9 of the 36px enter button) */
.ai-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

.ai-attach-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.ai-attach-btn:hover {
  filter: brightness(0.7);
}

/* Selection-scope chip above the composer: shown only for a deliberate
   multi-cell selection, so the resting single-cell state adds no chrome. */
.ai-scope-row {
  padding: 13px 14px 0;
}

.ai-scope-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 10px;
  border-radius: var(--radius-30);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: var(--text-caption);
  font-weight: 500;
}

/* the run in flight owns this scope: no dismiss control, so no room for one */
.ai-scope-hint.is-locked {
  padding-right: 10px;
}

.ai-scope-hint::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.ai-scope-clear {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
}

.ai-scope-clear:hover {
  opacity: 1;
}

/* attachment chips above the composer */
.ai-attachments {
  display: flex;
  gap: 8px;
  /* single row inside the prompt box, above the textarea (Lycero composer style):
     extra images run past the box edge and scroll horizontally.
     scroll (not auto) + zero bottom padding: the always-present 4px scrollbar lane
     doubles as the bottom padding, so overflowing never grows the strip and
     shifts its content up */
  overflow-x: scroll;
  /* side insets are transparent borders, not padding: overflow clips at the
     padding edge, so side padding would let scrolled items slide flush against
     the box edges — borders keep the 14px gaps while scrolling */
  padding: 13px 0 0;
  border-inline: 14px solid transparent;
  margin-bottom: -6px;
}

.ai-attachments > * {
  flex-shrink: 0;
}

/* The 4px scrollbar lane is always reserved (no layout jump when it appears);
   the thumb is painted only while scrolling (.is-scrolling from the strip's onScroll) */
.ai-attachments::-webkit-scrollbar {
  height: 4px;
}

.ai-attachments::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background: transparent;
}

.ai-attachments.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--sheets-scroll-thumb);
}

/* Image attachments: square thumbnail with a round dark remove button on its corner */
.ai-attachment-thumb {
  position: relative;
}

.ai-attachment-thumb img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 12px;
}

.ai-attachment-thumb-remove {
  position: absolute;
  top: -10px;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--sheets-chip-remove-bg);
  color: var(--sheets-chip-remove-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ai-attachment-thumb-remove:hover {
  background: var(--sheets-chip-remove-hover);
}

/* The card's 1px border shifts its absolutely-positioned button inward by 1px
   on both axes; land the borderless thumbs' button on the exact same spot */
.ai-attachment-thumb .ai-attachment-thumb-remove {
  top: -9px;
  right: -1px;
}

/* image thumb before its preview arrives (or when reading fails): neutral tile + type icon */
.ai-attachment-thumb-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-content);
}

.ai-attachment-thumb .ai-attachment-thumb-pending img {
  width: 26px;
  height: 26px;
}

/* Non-image attachments (pdf, xlsx, …): fixed-width bordered card — brand type
   icon + truncated name and size, same height and remove button as the thumbs */
.ai-attachment-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
  height: 56px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  background: var(--bg-content);
}

/* the type icon sits in its own bordered white tile, like the Lycero card */
.ai-attachment-card-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
}

.ai-attachment-card-icon img {
  display: block;
  width: 26px;
  height: 26px;
}

.ai-attachment-card-meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ai-attachment-card-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-attachment-card-size {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* attachments echoed on a sent user message (read-only: no remove button, smaller thumbs) */
.ai-msg-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.ai-msg-attachments .ai-attachment-thumb img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.ai-msg-attachments .ai-attachment-card {
  width: auto;
  max-width: 190px;
  height: 44px;
  background: var(--surface);
}

.ai-msg-attachments .ai-attachment-card-icon {
  width: 32px;
  height: 32px;
  background: var(--surface-subtle);
}

.ai-msg-attachments .ai-attachment-card-icon img {
  width: 22px;
  height: 22px;
}

.ai-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--sheets-chip-bg);
  font-size: 11.5px;
  color: var(--text);
  max-width: 100%;
}

.ai-attachment-chip svg {
  flex-shrink: 0;
  color: var(--accent);
}

.ai-attachment-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ai-attachment-remove:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.ai-attach-notice {
  margin-bottom: 7px;
  font-size: 11.5px;
  color: var(--sheets-ai-error);
}

/* whole-panel drop target highlight */
.ai-panel-dragover {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

.link-button {
  display: inline;
  border: none;
  padding: 0;
  color: var(--accent-dark);
  background: none;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ─── Slicer ─────────────────────────────────────────────────────────── */

/* Field picker: grid of button tiles */
.slicer-picker-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 18px 10px;
}

.slicer-picker-field {
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12.5px;
  cursor: pointer;
}

.slicer-picker-field:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* Slicer overlay stack on the right side of the worksheet */
.slicer-stack {
  position: fixed;
  top: 190px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
}

.slicer-panel {
  width: 190px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--sheets-shadow-slicer);
  overflow: hidden;
}

.slicer-panel header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  background: var(--accent);
  color: var(--sheets-on-accent);
  font-size: 12.5px;
  font-weight: 600;
}

.slicer-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slicer-clear,
.slicer-close {
  border: none;
  background: transparent;
  color: var(--sheets-on-accent);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 4px;
}

.slicer-clear:disabled {
  opacity: 0.45;
  cursor: default;
}

.slicer-clear:hover:not(:disabled),
.slicer-close:hover {
  background: var(--sheets-on-accent-hover);
}

.slicer-members {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
}

.slicer-member {
  text-align: left;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--sheets-member-bg);
  color: var(--sheets-member-ink);
  font-size: 12.5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slicer-member.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sheets-on-accent);
}

.slicer-member:hover:not(.selected) {
  border-color: var(--accent);
}

.timeline-range {
  padding: 6px 10px 0;
  color: var(--sheets-member-ink);
  font-size: 12px;
}

.timeline-months {
  display: flex;
  gap: 2px;
  padding: 8px;
  max-width: 260px;
  overflow-x: auto;
}

.timeline-month {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 4px 4px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--sheets-member-bg);
  color: var(--sheets-member-ink);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
}

.timeline-month.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sheets-on-accent);
}

.timeline-month:hover:not(.selected) {
  border-color: var(--accent);
}

/* Univer's bottom sheet-switcher: the selected tab label ships in Univer's
   primary blue (univer-text-primary-700); recolor it to the Excel green. */
[data-u-comp='slide-tab-item'][aria-selected='true'] {
  color: var(--accent) !important;
}

/* The gridlines toggle at the right of the sheet bar is a two-tone icon whose
   accent path hardcodes fill=var(--univer-primary-600); neutralize the blue. */
.univerjs-icon-hide-gridlines-double-icon {
  --univer-primary-600: currentColor;
}

/* Univer paints its popups (right-click menus, dropdowns, dialogs) from the
 * DOCUMENT theme, while `color-scheme` on :root follows the APP chrome. When
 * the two differ — a dark app with the document theme pinned light — the UA
 * system colors inside the popups resolve to their dark variants: the menu
 * item buttons only carry Univer's dark-mode text class, so their labels turn
 * white on the light menu surface and vanish (#2041). Track Univer's
 * own dark flag so its popups get the UA scheme matching what they render. */
.univer-popup {
  color-scheme: light;
}

.univer-dark .univer-popup {
  color-scheme: dark;
}

.ai-msg-undelivered {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--sheets-ai-error);
}

.ai-retry-btn {
  border: 1px solid var(--sheets-ai-error-border);
  border-radius: 4px;
  background: none;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--sheets-ai-error);
  cursor: pointer;
}

.ai-retry-btn:hover {
  background: var(--sheets-ai-error-bg);
}

.ai-login-btn {
  margin-top: 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  padding: 4px 14px;
  font-size: 13px;
  color: var(--sheets-on-accent);
  cursor: pointer;
}

.ai-login-btn:hover {
  opacity: 0.88;
}

/* ================= transient toast (save feedback) ================= */

.app-toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translate(-50%, -8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--sheets-toast-bg);
  color: var(--sheets-toast-ink);
  font-size: 13px;
  box-shadow: var(--sheets-shadow-toast);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  max-width: 60vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.app-toast.error {
  background: var(--sheets-toast-error-bg);
}

.app-toast-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.app-toast.success .app-toast-icon {
  color: var(--sheets-toast-ok);
}

/* Shape gallery dropdown (slides/docs parity: grouped, outline-icon grid) */
.menu-select-drop.rb-shape-gallery {
  width: 264px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 8px;
}

.rb-drop-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 4px 2px 3px;
}

.rb-shape-grid {
  display: grid;
  grid-template-columns: repeat(8, 28px);
  gap: 3px;
  margin-bottom: 4px;
}

.menu-select-drop.rb-shape-gallery .rb-shape-cell {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.menu-select-drop.rb-shape-gallery .rb-shape-cell:hover {
  border-color: var(--accent);
  background: var(--ribbon-hover);
}

/* Shape draw mode: crosshair over the whole grid while armed */
#univer-container.sheet-shape-drawing,
#univer-container.sheet-shape-drawing * {
  cursor: crosshair !important;
}

/* Watch Window: floating non-modal panel (Formulas > Watch Window) */
.watch-window {
  position: fixed;
  right: 18px;
  bottom: 64px;
  width: 420px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--sheets-shadow-slicer);
  overflow: hidden;
  z-index: 1000;
}

.watch-window header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  background: var(--accent);
  color: var(--sheets-on-accent);
  font-size: 12.5px;
  font-weight: 600;
}

.watch-title {
  flex: 1;
}

.watch-add,
.watch-close {
  border: none;
  background: transparent;
  color: var(--sheets-on-accent);
  font-size: 12px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  border-radius: 4px;
}

.watch-add:hover,
.watch-close:hover {
  background: var(--sheets-on-accent-hover);
}

.watch-empty {
  margin: 0;
  padding: 14px 12px;
  font-size: 12px;
  color: var(--text-muted);
}

.watch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  overflow-y: auto;
}

.watch-table th,
.watch-table td {
  padding: 4px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-table th {
  color: var(--text-muted);
  font-weight: 500;
}

.watch-formula {
  font-family: ui-monospace, monospace;
}

.watch-gone td {
  text-decoration: line-through;
  color: var(--text-muted);
}

.watch-remove {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 4px;
}

.watch-remove:hover {
  background: var(--hover);
  color: var(--text);
}

/* View > Formula Bar toggle: an app-level setting (not in the file), hiding
   Univer's formula-bar row; the flex workbench reflows the grid below. */
#univer-container.formula-bar-hidden [data-u-comp='formula-bar'] {
  display: none;
}

/* ── Shared dropdown (@lycero/ui gs-dd) app sizing ──────────────────────
   Ports the old native-select metrics per container so replacing <select>
   with the themed Dropdown doesn't shift layout (reference: the matching
   block in apps/slides styles.css). */

/* dialog fields: fill the grid cell like the old `.dialog-grid select`
   (100% × 26px) / `.numfmt-field select` rules */
.dialog-grid .gs-dd,
.numfmt-field .gs-dd {
  width: 100%;
  min-width: 0;
}

.dialog-grid .gs-dd-btn,
.numfmt-field .gs-dd-btn {
  border-radius: var(--radius-small);
}

/* pivot rows: the field pickers keep their old inline flex: 1 stretch */
.pivot-dialog .gs-dd.pivot-dd-grow {
  flex: 1;
  min-width: 0;
}

/* floating chart editor: old `.chart-editor select` was 120px+ × 24px, 11px type */
.chart-editor .gs-dd {
  min-width: 120px;
}

.chart-editor .gs-dd-btn {
  height: 24px;
  font-size: 11px;
}

/* chart format pane: old `.chart-format-pane select` was a fixed 120px */
.chart-format-pane .gs-dd {
  width: 120px;
}

/* custom-sort dialog: the old .select-like triggers were 28px tall; widths
   come from the .sort-level grid columns */
.sort-level .gs-dd {
  min-width: 0;
}

.sort-level .gs-dd-btn {
  height: 28px;
}

/* Insert Function filter row: a floor so the trigger doesn't resize with
   each picked category (the old select sized to its longest option) */
.fn-filter-row .gs-dd {
  flex-shrink: 0;
  min-width: 120px;
}

/* Excel split color tools: the glyph applies the current color, the slim
   caret opens the palette. The pair reads as one control — shared hover
   tint, individually highlighted halves (docs-ribbon parity). */
.inline-tools .menu-select.color-split {
  display: inline-flex;
  align-items: stretch;
}

.inline-tools .color-split .color-tool {
  min-width: 24px;
  border-radius: var(--radius-small) 0 0 var(--radius-small);
}

.inline-tools .color-tool-caret {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 13px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
}

.inline-tools .color-tool-caret .chev {
  margin-left: 0;
}

.inline-tools .color-split:hover .color-tool:not(:disabled),
.inline-tools .color-split:hover .color-tool-caret:not(:disabled) {
  background: var(--ribbon-hover);
}

.inline-tools .color-tool-caret:hover:not(:disabled),
.inline-tools .color-tool-caret.is-active {
  background: var(--ribbon-active, var(--ribbon-hover));
}

/* Border dropdown entries: glyph + label, Excel-style; the drop sits inside
   .inline-tools, so the span sheds the 28×30 toggle box and its hover */
.menu-select-drop .menu-option-icon {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  height: auto;
  margin-right: 8px;
  vertical-align: -3px;
}

.menu-select-drop .menu-option-icon:hover {
  background: transparent;
}

/* Find & Replace panel (Ctrl+F / Ctrl+H): Excel-style modeless dialog.
   Sits above the grid but below modal dialog backdrops (z 900+), so Format
   Cells and friends still cover it. */
.find-replace-panel {
  position: fixed;
  top: 96px;
  right: 24px;
  z-index: 120;
  display: grid;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}

.find-replace-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  cursor: move;
  user-select: none;
  touch-action: none;
}

.find-replace-panel .fr-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-small);
  cursor: pointer;
}

.find-replace-panel .fr-close:hover {
  background: var(--hover);
  color: var(--text);
}

.find-replace-panel .fr-grid {
  display: grid;
  gap: 10px;
}

.find-replace-panel .fr-grid > label {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.find-replace-panel .fr-grid input:not([type='checkbox']),
.find-replace-panel .fr-options select {
  width: 100%;
  min-width: 0;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  padding: 0 6px;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
}

.find-replace-panel .fr-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.find-replace-panel .fr-options label {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 11px;
}

.find-replace-panel .fr-checks {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text);
}

.find-replace-panel .fr-status {
  min-height: 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.find-replace-panel .fr-actions {
  flex-wrap: wrap;
}

.find-replace-panel .fr-results {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.find-replace-panel .fr-results table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  display: block;
  max-height: 220px;
  overflow-y: auto;
}

.find-replace-panel .fr-results th,
.find-replace-panel .fr-results td {
  text-align: start;
  padding: 3px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.find-replace-panel .fr-results th {
  color: var(--text-muted);
  font-weight: 500;
  position: sticky;
  top: 0;
  background: var(--surface);
}

.find-replace-panel .fr-results tbody tr {
  cursor: pointer;
}

.find-replace-panel .fr-results tbody tr:hover {
  background: var(--hover);
}

.find-replace-panel .fr-results-count {
  font-size: 11px;
  color: var(--text-muted);
}

/* Spelling panel (F7 / Review ▸ Proofing) rides the find-replace panel chrome;
   these only add its note line, selected row and the suggestion chips. */

.find-replace-panel .spell-note {
  font-size: 11px;
  color: var(--text-muted);
}

.find-replace-panel .fr-results tbody tr.spell-selected {
  background: var(--accent-soft);
}

.find-replace-panel .spell-detail {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.find-replace-panel .spell-detail-text {
  display: grid;
  gap: 2px;
  font-size: 12px;
  word-break: break-word;
}

.find-replace-panel .spell-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.find-replace-panel .spell-suggestion {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent-dark);
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}

.find-replace-panel .spell-suggestion:hover {
  background: var(--hover);
}

.find-replace-panel .spell-no-suggestion {
  font-size: 12px;
  color: var(--text-muted);
}

.find-replace-panel .spell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* The stock Univer find dialog is replaced by .find-replace-panel; it still
   mounts (its controller carries the find-session lifecycle) but must never
   show. Keyed on the component marker because the portal wrapper carries no
   stable class. */
body > div:has([data-u-comp='find-replace-dialog']) {
  display: none !important;
}

.protect-sheet-allow {
  list-style: none;
  margin: 0 0 10px;
  padding: 6px 10px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  columns: 2;
}

.protect-sheet-allow label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  break-inside: avoid;
}

/* Table Design tab: name box, option checks and the styles gallery. Swatch
   colors are document data (the table style itself), set inline. */
.table-name-field {
  min-width: 120px;
  gap: 2px;
}
.table-name-label {
  font-size: 11px;
  color: var(--text-muted);
}
.table-name-input,
.table-range-input {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
.table-range-input {
  margin: 6px 0 10px;
  font-family: ui-monospace, monospace;
}
.table-options .check-item[disabled] {
  opacity: 0.5;
}
.table-style-gallery {
  position: relative;
}
.table-style-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  width: 520px;
  max-height: 60vh;
  overflow: auto;
  padding: 8px 10px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
}
.table-style-panel header {
  margin: 6px 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.table-style-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.table-style-swatch {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
}
.table-style-swatch:hover {
  background: var(--hover);
  border-color: var(--border);
}
.table-style-swatch.active {
  border-color: var(--accent);
}
.table-style-swatch .swatch-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  height: 7px;
  padding: 0 2px;
  border-bottom: 1px solid transparent;
  background: var(--surface);
}
.table-style-swatch .swatch-row i {
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 1px;
  background: var(--text-muted);
  opacity: 0.6;
}

.fill-series-groups {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.fill-series-groups fieldset {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 6px;
  padding: 6px 10px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.fill-series-groups fieldset:disabled {
  opacity: 0.5;
}

.fill-series-groups .dialog-check {
  display: flex;
  align-items: center;
  gap: 6px;
}

.paste-special-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--text);
}

.paste-special-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 8px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.paste-special-group legend {
  padding: 0 4px;
  color: var(--text-dim);
}

.paste-special-types {
  grid-row: span 2;
}

.paste-special-flags {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
}

.paste-special-body .dialog-check {
  display: flex;
  align-items: center;
  gap: 6px;
}

.paste-special-body .dialog-check.is-disabled {
  color: var(--text-dim);
}

.paste-special-body + .dialog-actions .secondary:first-child {
  margin-right: auto;
}

/* Excel-style sheet-tab context menu (replaces Univer's footer tab menu). */
.sheet-tab-menu {
  position: fixed;
  z-index: 1000;
  min-width: 220px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-menu);
}

.sheet-tab-menu hr {
  margin: 4px 6px;
  border: none;
  border-top: 1px solid var(--border);
}

.sheet-tab-menu [role='menuitem'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.sheet-tab-menu [role='menuitem']:hover:not(:disabled),
.sheet-tab-menu [role='menuitem'][aria-expanded='true'] {
  background: var(--hover);
}

.sheet-tab-menu [role='menuitem']:disabled {
  color: var(--text-muted);
  cursor: default;
}

.sheet-tab-menu-sub {
  position: relative;
}

.sheet-tab-menu-pop {
  position: absolute;
  left: 100%;
  bottom: 0;
  margin-left: 2px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-menu);
}

.sheet-tab-menu-sub.flip .sheet-tab-menu-pop {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 2px;
}

[data-u-comp='slide-tab-item'][data-grouped='true'] {
  box-shadow: inset 0 -2px 0 0 var(--accent) !important;
}

.sheet-tab-dialog {
  min-width: 320px;
}

.sheet-tab-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.sheet-tab-select {
  width: 100%;
  padding: 2px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.sheet-tab-select option {
  padding: 3px 6px;
}

.sheet-tab-list {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
}

.sheet-tab-list [role='option'] {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  cursor: pointer;
}

.sheet-tab-list [role='option'].selected {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.sheet-tab-dialog .dialog-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* Blink refuses to place a caret (and drops typed keys) in an empty editable
   block whose box is 0px tall; Univer's hidden key proxy has no content. */
#univer-container [data-u-comp='editor'] {
  min-height: 1px;
}

/* Review ▸ Comments task pane (threaded comments) */
.threaded-comments-pane {
  position: fixed;
  top: 96px;
  right: 24px;
  bottom: 48px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 32px));
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.threaded-comments-pane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.threaded-comments-pane .tc-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-small);
  cursor: pointer;
}

.threaded-comments-pane .tc-close:hover {
  background: var(--hover);
  color: var(--text);
}

.threaded-comments-pane .tc-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.tc-empty {
  margin: 12px 4px;
  color: var(--text-muted);
  font-size: 13px;
}

.tc-thread {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  background: var(--surface);
}

.tc-thread.focused {
  border-color: var(--accent);
}

.tc-thread.resolved {
  opacity: 0.75;
}

.tc-thread > header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.tc-spacer {
  flex: 1;
}

.tc-cell {
  border: 0;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.tc-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--text-muted);
  font-size: 11px;
}

.tc-entry {
  display: grid;
  gap: 4px;
}

.tc-entry.reply,
.tc-thread .tc-entry + .tc-entry {
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.tc-entry-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.tc-author {
  font-weight: 600;
}

.tc-time {
  color: var(--text-muted);
}

.tc-text {
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
}

.tc-entry-tools {
  display: flex;
  gap: 10px;
}

.tc-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  padding: 0;
  cursor: pointer;
}

.tc-link:hover {
  text-decoration: underline;
}

.tc-link.danger {
  color: var(--danger);
}

.tc-composer {
  display: grid;
  gap: 6px;
}

.tc-composer textarea {
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
}

.tc-composer textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.tc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.tc-button {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}

.tc-button:hover {
  background: var(--hover);
}

.tc-button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.tc-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.thread-hover-card {
  position: fixed;
  z-index: 130;
  width: 280px;
  max-height: 60vh;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  pointer-events: none;
}

.thread-hover-card .tc-hint {
  color: var(--text-muted);
  font-size: 11px;
}

/* Print with Preview */
.format-cells-dialog.print-dialog {
  width: min(96vw, 1100px);
  max-width: 96vw;
  height: min(92vh, 760px);
  grid-template-rows: auto 1fr auto auto;
  min-width: 0;
}

.print-dialog-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  min-height: 0;
}

.print-settings {
  align-content: start;
  overflow-y: auto;
  padding-right: 4px;
}

.print-pages-row {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  gap: 6px;
}

.print-preview {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--surface-subtle);
}

.print-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}

.print-preview-bar button {
  min-width: 28px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
}

.print-preview-bar button:disabled {
  opacity: 0.4;
}

.print-preview-spacer {
  flex: 1;
}

.print-preview-pane {
  position: relative;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 12px;
}

.print-preview-page {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}

.print-preview-page iframe {
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

/* PivotTable Fields pane */
.pivot-fields-pane {
  position: fixed;
  z-index: 900;
  top: 140px;
  right: 12px;
  bottom: 40px;
  display: flex;
  width: 280px;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--sheets-shadow-pane);
  font-size: 12px;
  gap: 10px;
  user-select: none;
}
.pivot-fields-pane .dialog-backdrop {
  user-select: auto;
}
.pivot-fields-pane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.pivot-fields-pane header button {
  border: none;
  background: none;
  font-size: 14px;
  cursor: pointer;
}
.pivot-fields-pane > strong,
.pivot-field-list > strong,
.pivot-areas > strong,
.pivot-area > strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.pivot-field-list {
  display: flex;
  flex: 1 1 40%;
  min-height: 80px;
  flex-direction: column;
  gap: 4px;
}
.pivot-field-list ul {
  flex: 1;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  list-style: none;
  overflow-y: auto;
}
.pivot-field-list li label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: grab;
}
.pivot-field-list li label:hover {
  background: var(--hover);
}
.pivot-field-list li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pivot-areas {
  display: flex;
  flex: 1 1 60%;
  min-height: 160px;
  flex-direction: column;
  gap: 4px;
}
.pivot-area-grid {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  min-height: 0;
}
.pivot-area {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  background: var(--surface-subtle);
}
.pivot-area.is-drop-target {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pivot-area-chips {
  display: flex;
  flex: 1;
  min-height: 24px;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}
.pivot-chip {
  display: flex;
  align-items: center;
  min-height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  cursor: grab;
}
.pivot-chip.is-dragging {
  opacity: 0.4;
}
.pivot-chip-label {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pivot-chip-label small {
  color: var(--text-muted);
  font-size: 10px;
}
.pivot-chip > button {
  flex: none;
  width: 20px;
  border: none;
  border-left: 1px solid var(--border-subtle);
  background: none;
  cursor: pointer;
}
.pivot-chip > button:hover {
  background: var(--hover);
}
.pivot-drop-marker {
  height: 2px;
  margin: 0 2px;
  border-radius: 1px;
  background: var(--accent);
}
.pivot-drag-ghost {
  position: fixed;
  z-index: 1000;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  pointer-events: none;
}
.pivot-chip-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  min-width: 200px;
  flex-direction: column;
  padding: 4px 0;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  transform: translateX(-100%);
}
.pivot-chip-menu button {
  padding: 4px 12px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 12px;
  text-align: start;
  cursor: pointer;
}
.pivot-chip-menu button:hover:not(:disabled) {
  background: var(--hover);
}
.pivot-chip-menu button:disabled {
  color: var(--text-muted);
  cursor: default;
}
.pivot-fields-pane footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.pivot-fields-pane footer label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Picture/shape right-click menu: separators and nested submenus */
.chart-menu-separator {
  margin: 4px 6px;
  border: none;
  border-top: 1px solid var(--border);
}

.chart-menu-sub {
  position: relative;
}

.chart-menu-sub > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.chart-menu-sub.open > button {
  background: var(--surface-hover);
}

.chart-menu-caret {
  margin-left: 12px;
  font-size: 10px;
  opacity: 0.7;
}

.chart-menu-child {
  position: absolute;
  top: -4px;
  left: calc(100% + 2px);
}

/* Rotated pictures: the float container is the rotated AABB, the picture
   box the true frame centered inside it */
.xlsx-image-rotated {
  position: absolute;
  inset: 0;
  container-type: size;
}

.xlsx-image-rotated-inner {
  position: absolute;
  top: 50%;
  left: 50%;
}

.xlsx-image-rotated .xlsx-image,
.xlsx-image-rotated .xlsx-image-crop {
  width: 100%;
  height: 100%;
}

.visual-dialog .dialog-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.visual-dialog-textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
}

.visual-dialog-field {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 8px;
}

.visual-dialog-field input {
  min-width: 0;
}

.visual-dialog-size,
.visual-dialog-placement {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visual-dialog-remove {
  align-self: flex-start;
}

/* ── Withholding cells from the model ─────────────────────────────────────
 * The dialog itself wears the app's .modal-backdrop / .modal chrome; only
 * the three pieces unique to a redaction are added here. The placeholder
 * preview is the important one: it is the literal text the model will read,
 * so the reader has to see it before committing to the mark. */
.redact-dialog-desc {
  display: block;
  margin-bottom: 6px;
  line-height: 1.5;
}

.redact-dialog-range {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.redact-dialog-preview {
  margin: 0 0 12px;
  padding: 6px 8px;
  border-radius: var(--radius-small);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  color: var(--color-brand-secondary);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
}

/* A note's picture has nowhere to go inside Univer's note popup, so it gets a
   pane of its own. Both panes want the right edge, so each steps aside while
   the other is open rather than covering it. */
.note-pictures-pane {
  position: fixed;
  top: 96px;
  right: 24px;
  bottom: 48px;
  z-index: 121;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 32px));
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

body:has(.note-pictures-pane) .threaded-comments-pane {
  right: 380px;
}

.note-pictures-pane > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.note-pictures-pane .np-close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-small);
  cursor: pointer;
}

.note-pictures-pane .np-close:hover {
  background: var(--hover);
  color: var(--text);
}

.note-pictures-pane .np-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  gap: 10px;
}

.note-pictures-pane .np-empty {
  margin: 0;
  padding: 16px 6px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.note-pictures-pane .np-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.note-pictures-pane .np-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
}

.note-pictures-pane .np-cell {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.note-pictures-pane .np-cell:hover {
  color: var(--accent);
}

.note-pictures-pane .np-author,
.note-hover-card .np-author {
  color: var(--text-muted);
  font-size: 12px;
}

.note-pictures-pane .np-remove,
.note-hover-card .np-remove {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0 5px;
  border-radius: var(--radius-small);
  cursor: pointer;
}

.note-pictures-pane .np-remove:hover,
.note-hover-card .np-remove:hover {
  background: var(--hover);
  color: var(--text);
}

.note-pictures-pane .np-image,
.note-hover-card .np-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.note-pictures-pane .np-image-missing,
.note-hover-card .np-image-missing {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

.note-pictures-pane .np-text,
.note-hover-card .np-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The card under Univer's note popup for a note that carries a picture: it
   hangs below the popup's own box so author, picture and text read as one
   note. Reuses the pane's np-* pieces above. */
.note-hover-card {
  position: fixed;
  z-index: 130;
  width: 260px;
  max-height: 50vh;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}

.note-hover-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* ─── Sheets Real-Time Collaboration Bar (Phase 3 Frontend) ─── */
.sheets-collab-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);
}

.sheets-collab-presence {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sheets-presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--hover);
  color: var(--text);
  font-weight: 600;
  font-size: 10px;
}

.sheets-collab-sync-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  background: var(--hover);
  color: var(--text);
  border: 1px solid var(--border);
}

.sheets-collab-sync-badge[data-status="connected"] {
  border-color: var(--accent);
}

.sheets-collab-sync-badge[data-status="offline"] {
  border-color: var(--border-strong);
}

.sheets-collab-btn {
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
}

.sheets-collab-btn:hover {
  background: var(--hover);
}

.sheets-collab-modal {
  position: fixed;
  top: 48px;
  left: 200px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-modal);
  min-width: 240px;
}

.sheets-collab-modal-title {
  font-weight: 600;
  color: var(--text);
}

.sheets-collab-modal input {
  padding: 4px 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 4px;
  font-size: 12px;
}

.sheets-collab-modal-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.sheets-collab-modal-actions button {
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

.sheets-collab-protected-count,
.sheets-collab-filter-count {
  font-size: 11px;
  color: var(--text-muted);
}