/* Buttons */
.ui-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--ui-separator);
  border-radius: var(--ui-radius-8);
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow-1);
  color: var(--ui-text-primary);
  font: var(--ui-font-weight-body-strong) var(--ui-font-size-body-strong)/var(--ui-line-height-body-strong) var(--ui-font);
  white-space: nowrap;
  cursor: pointer;
}
.ui-button svg, .ui-menu-item svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.ui-button:not(.ui-button--primary) svg, .ui-menu-item:not(.ui-menu-item--danger) svg { color: var(--ui-text-secondary); }
.ui-button:hover:not(:disabled) { background: var(--ui-fill-3); }
.ui-button:active:not(:disabled) { background: var(--ui-fill-1); }
.ui-button--primary, .ui-button--primary:hover:not(:disabled), .ui-button--primary:active:not(:disabled) {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
  color: var(--ui-bg);
  box-shadow: none;
}
.ui-button--icon {
  width: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ui-text-secondary);
}
.ui-button:disabled, .ui-segment:disabled, .ui-toolbar-button:disabled, .ui-menu-item:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* Fields */
.ui-input, .ui-search, .ui-select {
  box-sizing: border-box;
  height: 32px;
  border-radius: var(--ui-radius-8);
  color: var(--ui-text-primary);
  font: var(--ui-font-weight-body) var(--ui-font-size-body)/var(--ui-line-height-body) var(--ui-font);
}
.ui-input {
  padding: 0 12px;
  border: 0;
  background: var(--ui-fill-2);
}
.ui-input::placeholder, .ui-search input::placeholder { color: var(--ui-text-placeholder); opacity: 1; }
.ui-search {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-8);
  padding: 0 8px;
  background: var(--ui-fill-2);
  color: var(--ui-text-tertiary);
}
.ui-search svg, .ui-select svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ui-text-secondary);
}
.ui-search input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ui-text-primary);
  font: inherit;
}
.ui-search kbd {
  flex: none;
  padding: 0 4px;
  border: .5px solid var(--ui-separator);
  border-radius: var(--ui-radius-6);
  background: var(--ui-bg);
  color: var(--ui-text-secondary);
  font: var(--ui-font-weight-label) var(--ui-font-size-label)/var(--ui-line-height-label) var(--ui-font);
  white-space: nowrap;
}
.ui-select {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-8);
  padding: 0 8px 0 12px;
  border: 1px solid var(--ui-separator);
  background: var(--ui-bg);
  cursor: pointer;
}
.ui-select select {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: inherit;
}
.ui-select svg { pointer-events: none; }

/* Segments, toolbar and menu */
.ui-segmented {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: var(--ui-radius-8);
  background: var(--ui-fill-2);
}
.ui-segment {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--ui-radius-6);
  background: transparent;
  color: var(--ui-text-secondary);
  font: var(--ui-font-weight-callout) var(--ui-font-size-callout)/var(--ui-line-height-callout) var(--ui-font);
  cursor: pointer;
}
.ui-segment svg { flex: none; width: 16px; height: 16px; }
.ui-segment[aria-pressed="true"], .ui-segment[aria-selected="true"] {
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow-1);
  color: var(--ui-text-primary);
  font-weight: var(--ui-font-weight-body-strong);
}
.ui-toolbar-button {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-4);
  width: 52px;
  min-height: 52px;
  padding: 4px;
  border: 0;
  border-radius: var(--ui-radius-6);
  background: transparent;
  color: var(--ui-text-secondary);
  font: var(--ui-font-weight-label) var(--ui-font-size-label)/var(--ui-line-height-label) var(--ui-font);
  cursor: pointer;
}
.ui-toolbar-button svg { flex: none; width: 20px; height: 20px; }
.ui-toolbar-button:where(:hover:not(:disabled)) { background: var(--ui-fill-3); }
.ui-toolbar-button[aria-pressed="true"], .ui-toolbar-button[aria-selected="true"] {
  background: var(--ui-selection-bg);
  color: var(--ui-selection-text);
}
.ui-menu {
  box-sizing: border-box;
  padding: 4px;
  border-radius: var(--ui-radius-12);
  background: var(--ui-bg);
  box-shadow: var(--ui-shadow-3);
}
.ui-menu-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ui-space-8);
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-6);
  background: transparent;
  color: var(--ui-text-primary);
  font: var(--ui-font-weight-body) var(--ui-font-size-body)/var(--ui-line-height-body) var(--ui-font);
  text-align: left;
  cursor: pointer;
}
.ui-menu-item:hover:not(:disabled) { background: var(--ui-fill-3); }
.ui-menu-item--danger { color: var(--ui-danger); }

/* Cards and folder tiles */
.ui-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ui-space-24);
}
.ui-card {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--ui-separator);
  border-radius: var(--ui-radius-12);
  background: var(--ui-bg);
  color: var(--ui-text-primary);
  box-shadow: none;
}
.ui-card:hover { box-shadow: var(--ui-shadow-2); }
.ui-cover {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-12);
  height: 168px;
  overflow: hidden;
  border-bottom: 1px solid var(--ui-separator);
  background: var(--ui-cover-bg, var(--ui-palette-blue-bg));
}
.ui-cover img {
  display: block;
  max-width: calc((100% - 24px) / 3);
  max-height: calc(100% - 24px);
  object-fit: contain;
}
.ui-card-body { display: flex; flex-direction: column; gap: var(--ui-space-4); padding: 12px 16px; }
.ui-card-title {
  overflow: hidden;
  margin: 0;
  color: var(--ui-text-primary);
  font: var(--ui-font-weight-headline) var(--ui-font-size-headline)/var(--ui-line-height-headline) var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-card-meta, .ui-folder-meta {
  margin: 0;
  color: var(--ui-text-secondary);
  font: var(--ui-font-weight-caption) var(--ui-font-size-caption)/var(--ui-line-height-caption) var(--ui-font);
  font-variant-numeric: tabular-nums;
}
.ui-folder {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ui-space-12);
  width: 100%;
  height: 56px;
  padding: 0 12px;
  border: 1px solid var(--ui-separator);
  border-radius: var(--ui-radius-12);
  background: var(--ui-bg);
  color: var(--ui-text-primary);
  text-align: left;
}
.ui-folder-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ui-radius-8);
  background: var(--ui-folder-bg, var(--ui-palette-blue-bg));
  color: var(--ui-folder-fg, var(--ui-palette-blue-fg));
}
.ui-folder-icon svg { width: 16px; height: 16px; }
.ui-folder > :not(.ui-folder-icon) { min-width: 0; }
.ui-folder-title, .ui-folder-meta { display: block; }
.ui-folder-title {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ui-text-primary);
  font: var(--ui-font-weight-body-strong) var(--ui-font-size-body-strong)/var(--ui-line-height-body-strong) var(--ui-font);
}

.ui-button:focus-visible,
.ui-segment:focus-visible, .ui-toolbar-button:focus-visible, .ui-menu-item:focus-visible, .ui-folder:focus-visible, .ui-card:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
}
/* 输入框、搜索框、下拉框获得焦点：只在外框画一圈柔和的蓝光（苹果样式），里面的原生控件不再画第二圈 */
.ui-input:focus-visible, .ui-search:focus-within, .ui-select:focus-within {
  outline: none;
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px var(--ui-selection-bg);
}
.ui-select select:focus, .ui-select select:focus-visible, .ui-search input:focus, .ui-search input:focus-visible { outline: none; box-shadow: none; }
@media (max-width: 960px) { .ui-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ui-card-grid { grid-template-columns: minmax(0, 1fr); } }