.sffx {
  --sffx-border: rgba(0, 0, 0, 0.12);
  --sffx-muted: rgba(0, 0, 0, 0.55);
  --sffx-hover: rgba(0, 0, 0, 0.04);
  --sffx-bg: rgba(255, 255, 255, 0.8);
  --sffx-folder: #2563eb;
  --sffx-file: #111827;
  --sffx-radius: 10px;
  --sffx-indent: 14px;
  --sffx-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  font: inherit;
}

.sffx .sffx-root {
  background: var(--sffx-bg);
  border: 1px solid var(--sffx-border);
  border-radius: var(--sffx-radius);
  padding: 12px;
  box-shadow: var(--sffx-shadow);
}

.sffx .sffx-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sffx .sffx-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
}

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

.sffx .sffx-item:has(> details[open]) {
  background: var(--sffx-hover);
}

.sffx .sffx-summary,
.sffx .sffx-link {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.sffx .sffx-details {
  width: 100%;
}

.sffx .sffx-summary {
  list-style: none;
  user-select: none;
}

.sffx .sffx-summary::-webkit-details-marker {
  display: none;
}

.sffx .sffx-link {
  color: inherit;
  text-decoration: none;
}

.sffx .sffx-link {
  display: inline-flex;
}

.sffx .sffx-name {
  word-break: break-word;
}

.sffx .sffx-dir details > .sffx-tree {
  padding-left: var(--sffx-indent);
  border-left: 1px dashed var(--sffx-border);
  margin-left: 6px;
}

.sffx .sffx-dir .sffx-summary::before {
  content: "";
  width: 16px;
  height: 14px;
  display: inline-block;
  background: var(--sffx-folder);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.9;
}

.sffx .sffx-dir details[open] > .sffx-summary::before {
  opacity: 1;
}

.sffx .sffx-dir .sffx-summary::after {
  content: "";
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-left: auto;
  background: currentColor;
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 120ms ease;
}

.sffx .sffx-dir details[open] > .sffx-summary::after {
  transform: rotate(90deg);
}

.sffx .sffx-file > .sffx-link::before {
  content: "";
  width: 14px;
  height: 16px;
  display: inline-block;
  background: var(--sffx-file);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 3.5L19.5 9H14V3.5z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM14 3.5L19.5 9H14V3.5z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  opacity: 0.8;
}