.fs-muted {
  color: var(--fs-fg-muted);
}

.fs-btn {
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 2px 8px;
  cursor: pointer;
  background: transparent;
}

a.fs-btn {
  text-decoration: none;
  display: inline-block;
  box-sizing: border-box;
}

.fs-btn:focus-visible {
  outline: 1px solid var(--fs-focus-ring);
  outline-offset: 1px;
}

.fs-btn-ghost:hover {
  background: var(--fs-bg-hover);
}

.fs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fs-btn-icon {
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fs-fg-muted);
}

.fs-btn-icon:hover:not(:disabled) {
  color: var(--fs-fg);
  background: var(--fs-bg-hover);
}

.fs-btn-primary {
  background: var(--fs-accent);
  color: var(--fs-on-accent);
  border-color: transparent;
  padding: 4px 14px;
}

.fs-btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.fs-icon-plus {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.fs-icon-pencil {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
}

.fs-icon-trash {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.fs-tree-row {
  position: relative;
}

.fs-tree-actions {
  margin-left: auto;
  display: none;
  gap: 2px;
}

.fs-tree-row:hover .fs-tree-actions {
  display: flex;
}

.fs-icon-close-sm {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  width: 14px;
  height: 14px;
}

.fs-activity-item {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid transparent;
  color: var(--fs-fg-muted);
}

.fs-activity-item:hover:not(:disabled) {
  color: var(--fs-fg);
}

.fs-activity-item.is-active {
  color: var(--fs-fg);
  border-left-color: var(--fs-accent);
}

.fs-activity-item:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fs-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.fs-icon-files {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M3 7h5l2 2h11v10H3z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M3 7h5l2 2h11v10H3z'/%3E%3C/svg%3E");
}

.fs-icon-search {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E");
}

.fs-icon-projects {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 7h7l2 2h7v10H4z'/%3E%3Cpath d='M4 7V5a2 2 0 0 1 2-2h4l2 2'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 7h7l2 2h7v10H4z'/%3E%3Cpath d='M4 7V5a2 2 0 0 1 2-2h4l2 2'/%3E%3C/svg%3E");
}

.fs-icon-help {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cline x1='12' y1='2' x2='12' y2='3'/%3E%3Cpath d='M18.4 11A6 6 0 1 0 5.6 11a5 5 0 0 0 2.4 4v1h8v-1a5 5 0 0 0 2.4-4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3Cline x1='12' y1='2' x2='12' y2='3'/%3E%3Cpath d='M18.4 11A6 6 0 1 0 5.6 11a5 5 0 0 0 2.4 4v1h8v-1a5 5 0 0 0 2.4-4'/%3E%3C/svg%3E");
}

.fs-icon-info {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* Masks: stroke=white defines shape; fill color comes from .fs-icon { background: currentColor }. */
/* Source SVGs: frontend/icons/icon-*.svg (keep in sync when editing). */
.fs-icon-admin {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}

.fs-icon-profile {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

.fs-icon-sign-in {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E");
}

.fs-icon-sign-out {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

.fs-btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fs-titlebar-actions .fs-btn-with-icon .fs-icon {
  width: 16px;
  height: 16px;
}

.fs-btn-primary.fs-btn-with-icon .fs-icon {
  width: 18px;
  height: 18px;
}

.fs-help-nav-pane {
  padding: 8px 10px 12px;
}

.fs-help-nav {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fs-help-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 10px;
}

.fs-help-nav-link:hover {
  background: var(--fs-bg-hover);
  color: var(--fs-fg);
}

.fs-help-nav-link:focus-visible {
  outline: 1px solid var(--fs-focus-ring);
  outline-offset: 1px;
}

.fs-guide-panel-inner {
  max-width: 720px;
  margin: 0 auto;
  overflow-x: auto;
}

.fs-profile-panel .fs-profile-view-note {
  margin: 0 0 12px;
  font-size: 13px;
}

.fs-profile-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.fs-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--fs-border-subtle, rgba(128, 128, 128, 0.35));
}

.fs-profile-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fs-fg);
}

.fs-profile-sub {
  margin: 0;
  font-size: 14px;
}

.fs-profile-dl {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 6px 20px;
  font-size: 14px;
  line-height: 1.45;
}

.fs-profile-dt {
  margin: 0;
  color: var(--fs-fg-muted);
  font-weight: 500;
}

.fs-profile-dd {
  margin: 0;
  color: var(--fs-fg);
  word-break: break-word;
}

.fs-about-page .fs-about-brand {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fs-fg);
}

.fs-about-page .fs-about-tagline {
  margin: 0 0 20px;
  font-size: 14px;
}

.fs-about-page .fs-about-foot {
  margin: 20px 0 0;
  font-size: 12px;
}

.fs-about-mail {
  color: var(--fs-accent);
  text-decoration: none;
  word-break: break-all;
}

.fs-about-mail:hover {
  color: var(--fs-link-hover);
  text-decoration: underline;
}

.fs-about-mail:focus-visible {
  outline: 1px solid var(--fs-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.fs-help-guide {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fs-fg);
  padding: 0;
}

.fs-help-section {
  margin-bottom: 14px;
}

.fs-help-section:last-child {
  margin-bottom: 4px;
}

.fs-help-heading {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-fg-muted);
}

.fs-help-p {
  margin: 0;
  color: var(--fs-fg);
}

.fs-help-list {
  margin: 0;
  padding-left: 18px;
}

.fs-help-list li {
  margin-bottom: 6px;
}

.fs-help-list li:last-child {
  margin-bottom: 0;
}

.fs-help-subheading {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fs-fg);
}

.fs-help-theory .fs-help-subheading:first-of-type {
  margin-top: 10px;
}

.fs-help-theory .katex-display {
  margin: 10px 0;
  padding: 4px 0;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.fs-help-theory .katex {
  font-size: 1.06em;
}

.fs-tree {
  padding: 0 8px;
}

.fs-tree-section {
  margin-bottom: 2px;
}

.fs-tree-row {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  padding: 4px 6px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}

.fs-tree-row:hover:not(:disabled) {
  background: var(--fs-bg-hover);
}

.fs-tree-row.is-drop-target {
  background: var(--fs-drop-target-bg);
  outline: 1px dashed var(--fs-drop-target-outline);
  outline-offset: -2px;
}

.fs-tree-parent {
  font-weight: 500;
}

.fs-tree-parent[aria-expanded="false"] + .fs-tree-children {
  display: none;
}

.fs-tree-children {
  padding-left: 12px;
}

.fs-tree-chevron {
  width: 12px;
  height: 12px;
  background: currentColor;
  opacity: 0.7;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6l6 6-6 6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6l6 6-6 6z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.fs-tree-parent[aria-expanded="true"] .fs-tree-chevron {
  transform: rotate(90deg);
}

.fs-tree-leaf {
  font-weight: 400;
  color: var(--fs-fg-muted);
}

.fs-tree-file {
  font-weight: 400;
  color: var(--fs-fg);
}

.fs-tree-icon-sheet {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.85;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-rect {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v16'/%3E%3Cpath d='M18 4v16'/%3E%3Cpath d='M6 20h12'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v16'/%3E%3Cpath d='M18 4v16'/%3E%3Cpath d='M6 20h12'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-trap {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6l-2 14'/%3E%3Cpath d='M17 6l2 14'/%3E%3Cpath d='M5 20h14'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6l-2 14'/%3E%3Cpath d='M17 6l2 14'/%3E%3Cpath d='M5 20h14'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-rating-curve {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19h14'/%3E%3Cpath d='M5 19V5'/%3E%3Cpath d='M7 16c2.5-5 5-7 10-10'/%3E%3Ccircle cx='9' cy='14' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='13' cy='10' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='16' cy='7' r='1' fill='white' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19h14'/%3E%3Cpath d='M5 19V5'/%3E%3Cpath d='M7 16c2.5-5 5-7 10-10'/%3E%3Ccircle cx='9' cy='14' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='13' cy='10' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='16' cy='7' r='1' fill='white' stroke='none'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-circ {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M7 13h10'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M7 13h10'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-weir {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16'/%3E%3Cpath d='M8 17V6h8v11'/%3E%3Cpath d='M8 10h8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17h16'/%3E%3Cpath d='M8 17V6h8v11'/%3E%3Cpath d='M8 10h8'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-cipolletti {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14'/%3E%3Cpath d='M9 17 8 7h8l-1 10'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14'/%3E%3Cpath d='M9 17 8 7h8l-1 10'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-gvf {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M3 15c4-8 14-8 18 0'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M3 15c4-8 14-8 18 0'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-tree-icon-sluice {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M9 18V8'/%3E%3Cpath d='M15 18V8'/%3E%3Cpath d='M9 14h6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M9 18V8'/%3E%3Cpath d='M15 18V8'/%3E%3Cpath d='M9 14h6'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}

.fs-section-visual {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--fs-border);
  border-radius: 6px;
  background: var(--fs-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fs-section-visual-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fs-section-visual-meta {
  font-family: var(--fs-font-mono);
  font-size: 12px;
  color: var(--fs-fg-muted);
}

.fs-section-visual-svg {
  width: 180px;
  height: 120px;
  flex-shrink: 0;
}

/* Khosla seepage: schematic in chart-style panel (same shell as GVF depth profile) */
.fs-khosla-visual.fs-gvf-depth-profile-card .fs-gvf-profile-chart-host {
  min-height: 248px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 8px 18px;
  overflow: visible;
}

.fs-khosla-visual .fs-gvf-profile-chart-host svg.fs-section-visual-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.fs-rating-curve-svg {
  width: 260px;
  height: 150px;
  flex-shrink: 0;
}

/* GVF depth profile: label block on top, chart full width below */
.fs-section-visual.fs-gvf-depth-profile-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.fs-gvf-depth-profile-card .fs-gvf-depth-profile-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
  width: 100%;
  min-width: 0;
}

.fs-gvf-depth-profile-card .fs-gvf-profile-chart-host {
  flex: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  position: relative;
}

.fs-gvf-profile-chart-host .fs-gvf-chart-empty,
.fs-rating-curve-svg .fs-worksheet-chart-empty,
.fs-section-visual-svg .fs-worksheet-chart-empty {
  margin: 0;
  width: 100%;
  padding: 28px 12px;
  font-size: 12px;
  text-align: center;
}

/*
 * Viz tokens for worksheet SVGs and the GVF Chart.js host (getComputedStyle reads these).
 * Section outline & rating axes: fixed brown (#8b5a2b), same in light and dark (tokens.css).
 */
.fs-section-visual-svg,
.fs-rating-curve-svg,
.fs-nc-preview-svg,
.fs-gvf-profile-chart-host {
  --fs-viz-water-fill: rgba(0, 122, 204, 0.22);
  --fs-viz-water-stroke: #007acc;
  --fs-viz-outline: #8b5a2b;
  --fs-viz-axis: #8b5a2b;
  --fs-viz-curve: #007acc;
  --fs-viz-label: rgba(0, 0, 0, 0.62);
  --fs-viz-marker-fill: #ffffff;
  --fs-viz-marker-stroke: #007acc;
  --fs-viz-bed-fill: rgba(101, 67, 33, 0.16);
  --fs-viz-gvf-ref: rgba(0, 0, 0, 0.45);
  --fs-viz-gvf-ref-yc: rgba(180, 90, 20, 0.85);
  --fs-fg-muted: #6a6a6a;
  --fs-accent: #007acc;
}

@media (prefers-color-scheme: dark) {
  .fs-section-visual-svg,
  .fs-rating-curve-svg,
  .fs-nc-preview-svg,
  .fs-gvf-profile-chart-host {
    --fs-viz-water-fill: rgba(79, 195, 247, 0.35);
    --fs-viz-water-stroke: rgba(79, 195, 247, 0.95);
    /* outline & axis stay brown — not redeclared here */
    --fs-viz-curve: rgba(79, 195, 247, 0.95);
    --fs-viz-label: rgba(255, 255, 255, 0.78);
    --fs-viz-marker-fill: rgba(255, 255, 255, 0.9);
    --fs-viz-marker-stroke: rgba(79, 195, 247, 0.95);
    --fs-viz-bed-fill: rgba(180, 140, 100, 0.22);
    --fs-viz-gvf-ref: rgba(255, 255, 255, 0.42);
    --fs-viz-gvf-ref-yc: rgba(255, 180, 120, 0.9);
    --fs-fg-muted: #858585;
    --fs-accent: #007acc;
  }
}

/* Worksheet SVGs: use classes for theme colors so var() resolves via the stylesheet
   (some engines mishandle var() on SVG presentation attributes, especially on <circle>). */
.fs-viz-fill-water {
  fill: var(--fs-viz-water-fill);
}

.fs-viz-stroke-water {
  stroke: var(--fs-viz-water-stroke);
  fill: none;
}

.fs-viz-stroke-outline {
  stroke: var(--fs-viz-outline);
  fill: none;
}

.fs-viz-stroke-axis {
  stroke: var(--fs-viz-axis);
  fill: none;
}

.fs-viz-stroke-curve {
  stroke: var(--fs-viz-curve);
  fill: none;
}

.fs-viz-fill-bed {
  fill: var(--fs-viz-bed-fill);
}

.fs-viz-stroke-gvf-ref {
  stroke: var(--fs-viz-gvf-ref);
  fill: none;
  stroke-dasharray: 5 4;
}

.fs-viz-stroke-gvf-ref-yc {
  stroke: var(--fs-viz-gvf-ref-yc);
  stroke-dasharray: 3 3;
}

.fs-viz-rating-marker {
  fill: var(--fs-viz-marker-fill);
  stroke: var(--fs-viz-marker-stroke);
}

.fs-viz-axis-label {
  fill: var(--fs-viz-label);
}

.fs-404-code {
  margin: 0 0 8px;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fs-fg-muted);
  opacity: 0.88;
}

/* --- Login / landing (login.html) --- */
.fs-login-page-main {
  min-height: 0;
}

.fs-login-split {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  align-items: stretch;
}

.fs-login-landing {
  flex: 1 1 52%;
  min-width: 0;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  background: linear-gradient(
    165deg,
    var(--fs-bg-elevated) 0%,
    color-mix(in srgb, var(--fs-bg-elevated) 55%, var(--fs-bg)) 42%,
    var(--fs-bg) 100%
  );
  border-right: 1px solid var(--fs-border);
}

.fs-login-eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fs-accent);
}

.fs-login-hero-title {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--fs-fg);
  max-width: 28em;
}

.fs-login-hero-lead {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fs-fg-muted);
  max-width: 36em;
}

.fs-login-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 32em;
}

.fs-login-features li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 16px;
  border-left: 3px solid var(--fs-accent);
}

.fs-login-feature-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-fg);
}

.fs-login-feature-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fs-fg-muted);
}

.fs-login-auth {
  flex: 1 1 48%;
  min-width: min(100%, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  background: var(--fs-bg);
}

.fs-login-card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  padding: 28px 26px 26px;
  border-radius: 10px;
  border: 1px solid var(--fs-border);
  background: var(--fs-tab-active-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fs-login-card-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fs-fg);
}

.fs-login-card-sub {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fs-fg-muted);
}

.fs-login-btn-google {
  width: 100%;
  justify-content: center;
}

.fs-login-output {
  max-width: none;
  margin-top: 18px;
}

@media (max-width: 768px) {
  .fs-login-split {
    flex-direction: column;
    align-items: stretch;
  }

  .fs-login-landing {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid var(--fs-border);
    padding-bottom: 32px;
  }

  .fs-login-auth {
    flex: 1 1 auto;
    padding-top: 28px;
    padding-bottom: 32px;
  }
}

@supports not (color: color-mix(in srgb, white, black)) {
  .fs-login-landing {
    background: var(--fs-bg-elevated);
  }
}

.fs-welcome {
  width: 100%;
  box-sizing: border-box;
}

.fs-empty-state {
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.fs-empty-state-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 12px;
  background: var(--fs-bg-elevated);
  border: 1px solid var(--fs-border);
  opacity: 0.9;
}

.fs-empty-state-icon .fs-icon {
  transform: scale(1.25);
  opacity: 0.85;
}

.fs-welcome-title {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.fs-welcome-sub {
  margin: 0 0 22px;
  color: var(--fs-fg-muted);
  line-height: 1.55;
  font-size: 14px;
}

.fs-empty-steps {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  text-align: left;
  border: 1px solid var(--fs-border);
  border-radius: 8px;
  background: var(--fs-bg-elevated);
  overflow: hidden;
}

.fs-empty-steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--fs-border);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fs-fg);
}

.fs-empty-steps li:last-child {
  border-bottom: none;
}

.fs-empty-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--fs-tab-inactive-bg);
  color: var(--fs-fg-muted);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
}

.fs-empty-step-text strong {
  font-weight: 600;
  color: var(--fs-fg);
}

.fs-kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--fs-border);
  background: var(--fs-tab-active-bg);
  font-family: var(--fs-font-mono);
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.fs-empty-hint {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.45;
}

.fs-welcome-actions-inline {
  margin: 0;
}

.fs-welcome-actions {
  margin: 0;
  padding-left: 18px;
}

.fs-linklike {
  background: none;
  border: none;
  color: var(--fs-accent);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font: inherit;
}

.fs-linklike:hover {
  color: var(--fs-link-hover);
}

.fs-welcome-output {
  margin-top: 16px;
  max-width: 520px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  background: var(--fs-bg-elevated);
  border: 1px solid var(--fs-border);
  border-radius: 4px;
  font-family: var(--fs-font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.fs-modal[hidden] {
  display: none !important;
}

.fs-modal:not([hidden]) {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fs-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--fs-modal-scrim);
}

.fs-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 20px 20px 16px;
  background: var(--fs-bg-elevated);
  border: 1px solid var(--fs-border);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.fs-modal-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--fs-fg);
  text-transform: none;
  letter-spacing: normal;
}

.fs-modal-field {
  margin-bottom: 14px;
}

.fs-modal-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--fs-fg-muted);
}

.fs-modal-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--fs-border);
  border-radius: 2px;
  background: var(--fs-bg);
  color: var(--fs-fg);
  font: inherit;
}

.fs-modal-input:focus {
  outline: 1px solid var(--fs-focus-ring);
  outline-offset: 0;
}

/* Native select: category headers (support varies slightly by browser). */
select.fs-modal-select-worksheet-type optgroup {
  font-weight: 600;
  font-style: normal;
  color: var(--fs-fg-muted);
}

.fs-modal-hint {
  margin: 0 0 12px;
  font-size: 12px;
  min-height: 1.2em;
}

.fs-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.fs-worksheet-panel h1 {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 8px;
}

.fs-worksheet-panel .fs-ws-meta {
  color: var(--fs-fg-muted);
  font-size: 12px;
  margin-bottom: 20px;
}

.fs-worksheet-panel .fs-ws-placeholder {
  color: var(--fs-fg-muted);
  line-height: 1.5;
  max-width: 560px;
}

.fs-rc-root {
  max-width: 720px;
}

.fs-rc-intro {
  margin: 0 0 16px;
  color: var(--fs-fg-muted);
  font-size: 13px;
  line-height: 1.5;
}

.fs-rc-form {
  margin-bottom: 20px;
}

.fs-gvf-method-panel .fs-gvf-method-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
}

.fs-gvf-method-panel .fs-rc-grid {
  margin-bottom: 0;
}

.fs-rc-fieldset {
  border: 1px solid var(--fs-border);
  border-radius: 4px;
  padding: 10px 12px 12px;
  margin: 0 0 16px;
}

.fs-rc-legend {
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fs-fg-muted);
}

.fs-rc-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 13px;
}

.fs-rc-radio input {
  accent-color: var(--fs-accent);
}

.fs-rc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 16px;
  margin-bottom: 12px;
}

.fs-rc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fs-rc-field[hidden] {
  display: none !important;
}

/* [hidden] must beat .fs-rc-field { display: flex } (same specificity, our sheet wins last). */
.fs-rc-field[data-gvf-row="z"][hidden] {
  display: none !important;
}

.fs-rc-label {
  font-size: 12px;
  color: var(--fs-fg-muted);
}

.fs-rc-label i {
  font-style: italic;
  color: var(--fs-fg);
}

.fs-rc-label-hint {
  font-weight: 400;
  color: var(--fs-fg-muted);
  opacity: 0.92;
}

.fs-rc-actions {
  margin-top: 4px;
}

.fs-rc-error {
  margin: 10px 0 0;
  font-size: 12px;
  color: #f48771;
}

.fs-input-invalid {
  outline: 1px solid rgba(244, 135, 113, 0.85);
  outline-offset: 1px;
}

.fs-field-hint {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #f48771;
}

.fs-nc-nodes-hint {
  margin: 8px 0 0;
}

.fs-toast-host {
  position: fixed;
  right: 16px;
  bottom: 44px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 32px));
}

.fs-toast {
  pointer-events: auto;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--fs-border);
  background: var(--fs-bg-elevated);
  color: var(--fs-fg);
  cursor: pointer;
  animation: fs-toast-in 0.22s ease-out;
}

.fs-toast-error {
  border-color: rgba(244, 135, 113, 0.5);
}

.fs-toast-info {
  border-color: rgba(0, 122, 204, 0.45);
}

.fs-toast-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes fs-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fs-rc-output {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--fs-border);
}

.fs-rc-out-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-fg);
}

.fs-rc-out-subtitle {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fs-fg-muted);
}

.fs-rc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fs-rc-table th,
.fs-rc-table td {
  text-align: left;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--fs-border);
}

.fs-rc-table th {
  color: var(--fs-fg-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fs-rc-mono {
  font-family: var(--fs-font-mono);
  color: var(--fs-fg-muted);
}

.fs-rc-num {
  font-family: var(--fs-font-mono);
  text-align: right;
}

.fs-nc-preview-wrap {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--fs-border);
  border-radius: 6px;
  background: var(--fs-bg-elevated);
}

.fs-nc-preview-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fs-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fs-nc-preview-host {
  display: flex;
  justify-content: center;
}

.fs-nc-preview-svg {
  width: 100%;
  max-width: 280px;
  height: auto;
}

.fs-nc-table-scroll {
  overflow-x: auto;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--fs-border);
  border-radius: 4px;
}

.fs-nc-node-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fs-nc-node-table th,
.fs-nc-node-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid var(--fs-border);
}

.fs-nc-node-table th {
  color: var(--fs-fg-muted);
  font-weight: 600;
  font-size: 11px;
  position: sticky;
  top: 0;
  background: var(--fs-bg-elevated);
}

.fs-nc-node-actions {
  margin-top: 8px;
}

.fs-nc-remove {
  min-width: 28px;
  padding: 2px 6px;
}

.fs-tree-icon-natural {
  width: 14px;
  height: 14px;
  background: currentColor;
  opacity: 0.9;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18 L8 14 12 16 16 11 20 14 20 18 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18 L8 14 12 16 16 11 20 14 20 18 Z'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
}