/* ============================================================
   Yingo · 模块样式（结构与控件，全部类名与现有 JS 一一对应）
   ============================================================ */

/* ============ 通用模块卡 ============ */
.y-module {
  background: var(--yingo-surface);
  border: 1px solid var(--yingo-outline-variant);
  border-radius: var(--yingo-radius-lg);
  box-shadow: var(--yingo-shadow-1);
  padding: var(--yingo-sp-5);
  transition: box-shadow var(--yingo-dur), border-color var(--yingo-dur);
}
.y-module h3 { margin: 0 0 var(--yingo-sp-2); font-size: var(--yingo-fs-md); font-weight: 600; }
.y-module h4 { margin: var(--yingo-sp-4) 0 var(--yingo-sp-2); font-size: var(--yingo-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--yingo-on-surface-variant); }
.y-module p  { margin: 0; font-size: var(--yingo-fs-sm); color: var(--yingo-on-surface-variant); }

/* ============ 控件（唯一定义处） ============ */
.y-module button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--yingo-sp-2);
  min-height: 36px;
  padding: 0 var(--yingo-sp-4);
  border-radius: var(--yingo-radius-pill);
  font-size: var(--yingo-fs-sm);
  font-weight: 500;
  color: var(--yingo-on-surface);
  transition: background var(--yingo-dur-fast), color var(--yingo-dur-fast), transform var(--yingo-dur-fast);
  white-space: nowrap;
}
.y-module button:hover { background: var(--yingo-primary-soft); }
.y-module button:active { transform: scale(.97); }

.y-module-search-submit,
.y-admin-theme-bg-form button[type="submit"] {
  background: var(--yingo-primary);
  color: var(--yingo-on-primary);
  padding: 0 var(--yingo-sp-5);
}
.y-module-search-submit:hover,
.y-admin-theme-bg-form button[type="submit"]:hover {
  background: var(--yingo-primary);
  filter: brightness(1.06);
}

/* 图标按钮（音乐坞） */
.y-mp-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--yingo-radius-pill);
  font-size: var(--yingo-fs-lg);
}
.y-mp-btn--primary {
  width: 48px;
  min-width: 48px;
  height: 48px;
  font-size: var(--yingo-fs-xl);
  background: var(--yingo-primary);
  color: var(--yingo-on-primary);
}
.y-mp-btn--primary:hover { background: var(--yingo-primary); filter: brightness(1.06); }
.y-mp-btn--small { width: 32px; min-width: 32px; height: 32px; font-size: var(--yingo-fs-md); }
.y-mp-btn[data-on="1"] { color: var(--yingo-primary); background: var(--yingo-primary-soft); }
.y-mp-btn[data-mode="off"] { opacity: .38; }

/* 文本输入 / 下拉：细底边 */
.y-module input:not([type="range"]):not([type="file"]):not([type="checkbox"]),
.y-module select {
  min-height: 36px;
  padding: 0 var(--yingo-sp-2);
  border: 0;
  border-bottom: 1.5px solid var(--yingo-outline-variant);
  border-radius: 0;
  background: transparent;
  font-size: var(--yingo-fs-md);
  transition: border-color var(--yingo-dur-fast);
}
.y-module input:not([type="range"]):focus,
.y-module select:focus { border-bottom-color: var(--yingo-primary); }
.y-module input::placeholder { color: var(--yingo-on-surface-variant); opacity: .6; }

/* 滑块 */
.y-module input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  cursor: pointer;
}
.y-module input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: var(--yingo-outline-variant);
}
.y-module input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--yingo-primary);
}
.y-module input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--yingo-outline-variant); }
.y-module input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--yingo-primary); }

.y-module textarea {
  width: 100%;
  min-height: 64px;
  padding: var(--yingo-sp-2);
  border: 1px solid var(--yingo-outline-variant);
  border-radius: var(--yingo-radius-sm);
  font: var(--yingo-fs-xs) var(--yingo-font-mono);
  resize: vertical;
}

.y-module input[type="checkbox"] { accent-color: var(--yingo-primary); width: 15px; height: 15px; }
.y-module input[type="file"] { font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); }

/* ============ 时钟（顶栏） ============ */
.y-module-clock {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font-variant-numeric: tabular-nums;
}
.y-module-clock-date { font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); letter-spacing: .04em; }
.y-module-clock-time { font: 500 var(--yingo-fs-xl)/1.2 var(--yingo-font-mono); letter-spacing: .02em; }

/* ============ 搜索（英雄区居中） ============ */
.y-module-search {
  max-width: var(--yingo-col-w);
  margin: 0 auto;
  background: var(--yingo-glass-bg);
  border-color: var(--yingo-glass-border);
  box-shadow: var(--yingo-shadow-2);
  -webkit-backdrop-filter: blur(var(--yingo-blur)) saturate(1.4);
  backdrop-filter: blur(var(--yingo-blur)) saturate(1.4);
  padding: var(--yingo-sp-4);
  border-radius: var(--yingo-radius-xl);
}
.y-module-search-row { display: flex; align-items: center; gap: var(--yingo-sp-3); }
.y-module-search-engine { min-width: 108px; max-width: 130px; border-bottom: 0; font-size: var(--yingo-fs-sm); color: var(--yingo-on-surface-variant); cursor: pointer; }
.y-module-search-input {
  flex: 1;
  min-height: 44px;
  font-size: var(--yingo-fs-hero);
  border-bottom: 0;
}
.y-module-search-hint { margin-top: var(--yingo-sp-2); font-size: var(--yingo-fs-xs); opacity: .55; }

.y-module-search-aggregate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yingo-sp-4);
  margin-top: var(--yingo-sp-3);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--yingo-dur), opacity var(--yingo-dur);
}
.y-module-search:focus-within .y-module-search-aggregate,
.y-module-search.has-query .y-module-search-aggregate { max-height: 320px; opacity: 1; }
.y-module-search-apps, .y-module-search-music { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.y-module-search-result {
  width: 100%;
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 var(--yingo-sp-2);
  font-size: var(--yingo-fs-sm);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--yingo-radius-sm);
}
.y-module-search-empty { padding: 0 var(--yingo-sp-2); font-size: var(--yingo-fs-xs); opacity: .45; }

.y-module-search-custom { margin-top: var(--yingo-sp-3); }
.y-module-search-custom > summary {
  font-size: var(--yingo-fs-xs);
  color: var(--yingo-on-surface-variant);
  cursor: pointer;
  list-style: none;
  padding: var(--yingo-sp-1) 0;
  opacity: .7;
  transition: opacity var(--yingo-dur-fast);
}
.y-module-search-custom > summary::-webkit-details-marker { display: none; }
.y-module-search-custom > summary::before { content: "＋ "; }
.y-module-search-custom[open] > summary::before { content: "－ "; }
.y-module-search-custom > summary:hover { opacity: 1; }
.y-module-search-custom-row { display: flex; flex-wrap: wrap; gap: var(--yingo-sp-2); margin-top: var(--yingo-sp-2); }
.y-module-search-custom-row input { flex: 1; min-width: 130px; }

/* ============ 应用网格 ============ */
.y-module-apps-grid {
  max-width: var(--yingo-col-w);
  margin: 0 auto;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.y-module-apps-grid h2 { margin: 0 0 var(--yingo-sp-3); font-size: var(--yingo-fs-lg); font-weight: 600; }
.y-module-apps-grid-status { font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); opacity: .6; }
.y-module-apps-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--yingo-sp-3);
  margin-top: var(--yingo-sp-3);
}
.y-module-apps-grid-card {
  display: flex;
  flex-direction: column;
  gap: var(--yingo-sp-2);
  padding: var(--yingo-sp-4);
  background: var(--yingo-surface);
  border: 1px solid var(--yingo-outline-variant);
  border-radius: var(--yingo-radius-md);
  box-shadow: var(--yingo-shadow-1);
  cursor: pointer;
  transition: transform var(--yingo-dur-fast), box-shadow var(--yingo-dur-fast), border-color var(--yingo-dur-fast);
}
.y-module-apps-grid-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--yingo-shadow-2);
  border-color: var(--yingo-primary);
}
.y-module-apps-grid-card.is-dragging { opacity: .35; }
.y-module-apps-grid-card.is-drop-target { border-color: var(--yingo-primary); border-style: dashed; }
.y-module-apps-grid-card-head { display: flex; align-items: baseline; gap: var(--yingo-sp-2); min-width: 0; }
.y-module-apps-grid-icon { font-size: var(--yingo-fs-lg); }
.y-module-apps-grid-card-title { flex: 1; font-size: var(--yingo-fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.y-module-apps-grid-tags { display: flex; gap: var(--yingo-sp-2); flex-wrap: wrap; }
.y-module-apps-grid-group, .y-module-apps-grid-tag {
  font-size: 10px;
  padding: 1px 8px;
  border-radius: var(--yingo-radius-pill);
  background: var(--yingo-primary-soft);
  color: var(--yingo-on-surface-variant);
}
.y-module-apps-grid-card-desc { font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); line-height: 1.5; }
.y-module-apps-grid-card-link { font-size: var(--yingo-fs-xs); font-weight: 600; align-self: flex-start; padding: 0; min-height: 0; }
.y-module-apps-grid-empty { grid-column: 1 / -1; text-align: center; padding: var(--yingo-sp-5) 0; font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); opacity: .45; }

/* ============ 音乐坞 ============ */
.y-module-music-player {
  background: var(--yingo-glass-bg);
  border-color: var(--yingo-glass-border);
  box-shadow: var(--yingo-shadow-3);
  -webkit-backdrop-filter: blur(var(--yingo-blur)) saturate(1.5);
  backdrop-filter: blur(var(--yingo-blur)) saturate(1.5);
  border-radius: var(--yingo-radius-xl);
  padding: var(--yingo-sp-3) var(--yingo-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--yingo-sp-2);
}
.y-mp-head { display: flex; align-items: center; gap: var(--yingo-sp-3); min-width: 0; }
.y-mp-cover {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: var(--yingo-fs-lg);
  border-radius: var(--yingo-radius-md);
  background: var(--yingo-primary-soft);
  color: var(--yingo-primary);
}
.y-mp-info { flex: 1; min-width: 0; }
.y-mp-title { font-size: var(--yingo-fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.y-mp-info p { font-size: var(--yingo-fs-xs); }
.y-mp-controls { display: flex; align-items: center; gap: var(--yingo-sp-2); }
.y-mp-progress-row { display: flex; align-items: center; gap: var(--yingo-sp-2); }
.y-mp-time { font: var(--yingo-fs-xs) var(--yingo-font-mono); color: var(--yingo-on-surface-variant); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.y-mp-progress { flex: 1; }
.y-mp-vol-row {
  align-items: center;
  gap: var(--yingo-sp-2);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--yingo-dur), opacity var(--yingo-dur);
}
.y-module-music-player:hover .y-mp-vol-row,
.y-module-music-player:focus-within .y-mp-vol-row { max-height: 40px; opacity: 1; }
.y-mp-volume { max-width: 96px; }
.y-mp-speed { min-width: 72px; border-bottom: 0; font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); }
.y-mp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.y-mp-list[hidden] { display: none; }
.y-mp-list-item {
  width: 100%;
  justify-content: flex-start;
  min-height: 40px;
  padding: 0 var(--yingo-sp-3);
  font-size: var(--yingo-fs-sm);
  text-align: left;
  border-radius: var(--yingo-radius-sm);
}
.y-mp-list-item.is-active { color: var(--yingo-primary); background: var(--yingo-primary-soft); font-weight: 600; }
.y-mp-empty, .y-mp-status { text-align: center; font-size: var(--yingo-fs-xs); }

/* ============ 主题选择 / 管理抽屉 ============ */
.y-module-theme-manager,
.y-module-admin {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.y-module-theme-manager > summary,
.y-module-admin > summary {
  font-size: var(--yingo-fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: var(--yingo-sp-2) 0;
  display: none;                 /* 抽屉内不需要折叠标题，直接展开 */
}
.y-module-theme-manager[open] > summary,
.y-module-admin[open] > summary { display: none; }
.y-module-theme-manager-list { display: flex; flex-wrap: wrap; gap: var(--yingo-sp-2); margin-bottom: var(--yingo-sp-4); }
.y-module-theme-manager-item.is-active { background: var(--yingo-primary); color: var(--yingo-on-primary); }
.y-module-theme-manager-bg-form { display: flex; flex-wrap: wrap; gap: var(--yingo-sp-2); align-items: center; }
.y-module-theme-manager-bg-form label { font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); }

.y-admin-nav { display: flex; gap: var(--yingo-sp-1); margin-bottom: var(--yingo-sp-3); flex-wrap: wrap; }
.y-admin-nav-item { font-size: var(--yingo-fs-sm); }
.y-admin-nav-item[aria-selected="true"] { background: var(--yingo-primary); color: var(--yingo-on-primary); }
.y-admin-content { flex: 1; min-height: 0; overflow-y: auto; }

.y-admin-section { display: flex; flex-direction: column; gap: var(--yingo-sp-2); }
.y-admin-section h3 { margin-bottom: var(--yingo-sp-1); }
.y-admin-hint { font-size: var(--yingo-fs-xs); opacity: .7; }

.y-admin-apps-list, .y-admin-module-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.y-admin-app-row, .y-admin-module-list li {
  display: flex;
  align-items: center;
  gap: var(--yingo-sp-2);
  min-height: 40px;
  padding: 0 var(--yingo-sp-1);
  border-bottom: 1px solid var(--yingo-outline-variant);
  font-size: var(--yingo-fs-sm);
}
.y-admin-app-label { flex: 1; display: flex; align-items: center; gap: var(--yingo-sp-2); }

.y-admin-theme-list, .y-admin-data-actions,
.y-admin-storage-browser-actions, .y-admin-storage-browser-detail-actions,
.y-admin-storage-browser-toolbar { display: flex; flex-wrap: wrap; gap: var(--yingo-sp-2); align-items: center; }

.y-admin-storage-browser { display: flex; flex-direction: column; gap: var(--yingo-sp-2); font-size: var(--yingo-fs-sm); }
.y-admin-storage-browser-body { display: grid; grid-template-columns: minmax(140px, 1fr) 1.6fr; gap: var(--yingo-sp-3); min-height: 220px; }
.y-admin-storage-browser-zone-list, .y-admin-storage-browser-dir-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.y-admin-storage-browser-dir-item, .y-admin-storage-browser-zone {
  width: 100%;
  justify-content: flex-start;
  min-height: 32px;
  padding: 0 var(--yingo-sp-2);
  font-size: var(--yingo-fs-xs);
  text-align: left;
  border-radius: var(--yingo-radius-sm);
}
.y-admin-storage-browser-tree, .y-admin-storage-browser-detail { overflow-y: auto; max-height: 300px; padding: var(--yingo-sp-1); }
.y-admin-storage-browser-meta { font-size: var(--yingo-fs-xs); }
.y-admin-storage-browser-meta-table { border-collapse: collapse; width: 100%; font-size: var(--yingo-fs-xs); }
.y-admin-storage-browser-meta-table td { border-bottom: 1px solid var(--yingo-outline-variant); padding: 3px 6px; word-break: break-all; }
.y-admin-storage-browser-file-item { text-align: left; }
.y-admin-storage-browser-value {
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--yingo-surface-2);
  padding: var(--yingo-sp-2);
  border-radius: var(--yingo-radius-sm);
  max-height: 150px;
  overflow-y: auto;
  font: var(--yingo-fs-xs) var(--yingo-font-mono);
}
.y-admin-storage-browser-filters, .y-admin-storage-browser-import, .y-admin-storage-browser-export, .y-admin-storage-browser-backup { display: flex; flex-wrap: wrap; gap: var(--yingo-sp-2); }
.y-admin-storage-browser-dir { font-size: var(--yingo-fs-xs); color: var(--yingo-on-surface-variant); }

/* ============ 响应式 ============ */
@media (max-width: 640px) {
  .y-module-search-row { flex-wrap: wrap; }
  .y-module-search-input { min-width: 100%; order: -1; }
  .y-module-search-engine { min-width: 96px; }
  .y-mp-head { flex-wrap: wrap; }
  .y-mp-controls { width: 100%; justify-content: center; }
  .y-admin-storage-browser-body { grid-template-columns: 1fr; }
}