/* styles for NCM tool (完整文件，主题友好版) */
/* Dark theme */
:root {
  /* 基础颜色 */
  --bg-0: #0f172a;
  --bg-1: #1e293b;
  --card-bg: #1e293b;
  --modal-bg: #1e293b;
  --modal-overlay: rgba(0, 0, 0, 0.75);
  --fg: #f8fafc;
  --fg-muted: #94a3b8;
  
  /* 动画时间 */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  
  /* 动画曲线 */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  
  /* 动画位移 */
  --slide-small: 4px;
  --slide-normal: 8px;
  --slide-large: 16px;
  
  /* 强调色 */
  --primary: #6366f1;
  --primary-hover: #818cf8;
  --primary-active: #4f46e5;
  --success: #10b981;
  --success-hover: #34d399;
  --danger: #ef4444;
  --danger-hover: #f87171;
  
  /* 按钮样式 */
  --btn-primary-bg: var(--primary);
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-active: var(--primary-active);
  
  --btn-secondary-bg: #334155;
  --btn-secondary-fg: var(--fg);
  --btn-secondary-hover: #475569;
  --btn-secondary-active: #1e293b;
  
  --btn-outline-bg: transparent;
  --btn-outline-fg: var(--fg-muted);
  --btn-outline-border: #475569;
  --btn-outline-hover: #334155;
  
  --btn-danger-bg: var(--danger);
  --btn-danger-fg: #ffffff;
  --btn-danger-hover: var(--danger-hover);
  
  /* 组件样式 */
  --input-bg: #334155;
  --input-border: #475569;
  --input-focus: var(--primary);
  
  /* 进度条 */
  --progress-bg: #334155;
  --progress-fill: var(--primary);
  /* 进度条 */
  --progress-bg: #334155;
  --progress-fill: var(--primary);

  /* 额外的UI变量 */
  --card: #0f1724;
  --btn-bg: linear-gradient(90deg,var(--accent),#4c1d95);
  --btn-outline-bg: transparent;
  --btn-fg: #ffffff;
  --btn-border: rgba(255,255,255,0.06);
  --icon-bg: rgba(255,255,255,0.03);
  --icon-fg: var(--fg);
  --btn-shadow: 0 6px 18px rgba(0,0,0,0.15);

  /* faint / overlay colors (theme-aware) */
  --faint: rgba(255,255,255,0.06);
  --faint-2: rgba(255,255,255,0.03);
  --dash: rgba(255,255,255,0.06);
  --row-bg-start: rgba(255,255,255,0.005);
  --row-bg-end: rgba(255,255,255,0.002);

  /* 统一动画变量 */
  --timing-snap: cubic-bezier(.2,.9,.2,1);
  --timing-regular: cubic-bezier(.4,0,.2,1);
  --timing-bounce: cubic-bezier(.34,1.56,.64,1);
  --duration-fast: .12s;
  --duration-normal: .22s;
  --duration-slow: .3s;
  --translate-normal: 12px;
  --translate-small: 6px;
  --translate-tiny: 3px;
}

/* 移除亮色主题相关代码，统一使用暗色主题 */

html,body{
  height:100%;
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--fg);
  background:var(--bg-1);
}
.wrap{max-width:1200px;margin:28px auto;padding:16px}
.card{background:linear-gradient(180deg,var(--card-bg),rgba(255,255,255,0.01));border-radius:12px;padding:16px;box-shadow:0 14px 40px rgba(0,0,0,0.35);color:var(--fg)}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.title{font-size:20px;margin:0}
.subtitle{color:var(--muted);font-size:13px}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
}

.btn{
  padding:8px 12px;border-radius:10px;border:none;
    background:var(--btn-bg); color:var(--btn-fg-on-accent); cursor:pointer;
  transition: transform var(--duration-fast) var(--timing-bounce),
             box-shadow var(--duration-fast) var(--timing-regular),
             opacity var(--duration-fast) var(--timing-regular),
             background var(--duration-fast) var(--timing-regular);
  box-shadow: var(--btn-shadow);
}
.btn:hover{ transform: translateY(calc(var(--translate-tiny) * -1)); }
.btn:active{ transform: translateY(calc(var(--translate-tiny) * -0.3)); }
.btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }

.btn.outline{
  padding:8px 12px;
  border-radius:8px;
  border:none;
  background: linear-gradient(90deg,var(--accent),#4c1d95);
  color: var(--btn-fg-on-accent);
  cursor: pointer;
  border:1px solid var(--btn-border);
  box-shadow:none;
}

.iconBtn, .playerIcon {
  background: var(--icon-bg);
  color: var(--icon-fg);
  padding:6px;border-radius:8px;border:none;cursor:pointer;
  transition: background var(--duration-fast) var(--timing-regular),
             transform var(--duration-fast) var(--timing-bounce),
             color var(--duration-fast) var(--timing-regular);
}
.iconBtn:hover, .playerIcon:hover {
  transform: translateY(calc(var(--translate-tiny) * -0.7));
  background: color-mix(in srgb, var(--icon-bg) 70%, var(--accent) 30%);
  color: var(--accent);
}
.iconBtn:active, .playerIcon:active { transform: translateY(0); }
.iconBtn:disabled, .playerIcon:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.playerIcon svg { stroke: currentColor; }

.drop{
  margin-top:12px;
  border:2px dashed var(--dash);
  padding:14px;
  border-radius:10px;
  text-align:center;
  cursor:pointer;
  transition: transform var(--duration-normal) var(--timing-bounce),
              border-color var(--duration-normal) var(--timing-regular),
              background var(--duration-normal) var(--timing-regular);
}
.drop:hover {
  transform: translateY(calc(var(--translate-small) * -1));
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.drop.drag {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: scale(1.02);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.list{margin-top:14px;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;padding-right:6px}
.row{
  display:grid;grid-template-columns:84px 1fr 90px 90px 220px;gap:12px;
  align-items:center;padding:10px;border-radius:10px;
  background:linear-gradient(180deg, var(--row-bg-start), var(--row-bg-end));
  transition: transform var(--duration-normal) var(--timing-bounce),
             opacity var(--duration-normal) var(--timing-regular);
  animation: row-appear var(--duration-slow) var(--timing-regular) backwards;
}
@keyframes row-appear {
  from { opacity: 0; transform: translateY(var(--translate-normal)); }
  to { opacity: 1; transform: translateY(0); }
}
.row.header{background:transparent}
.row:hover{transform: translateY(calc(var(--translate-small) * -1))}
.cover{width:72px;height:72px;border-radius:8px;object-fit:cover;background:#08101a}
.titleStrong{font-weight:700}
.meta{color:var(--muted);font-size:13px}
.small{font-size:12px;color:var(--muted)}
.rightActions{display:flex;gap:8px;justify-content:flex-end}
.rowProgress{height:6px;border-radius:999px;background:var(--faint-2);overflow:hidden}
.rowProgress > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2))}

/* modal / announce / error styling (all animated) */
.modalMask, .announceMask {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
  transition: background-color var(--duration-normal) var(--timing-regular);
}
.modalMask { background: rgba(1,6,12,0.45); color: var(--fg); }
.announceMask { background: rgba(1,6,12,0.45); color: var(--fg); }
body.theme-light .modalMask, body.theme-light .announceMask { background: rgba(255,255,255,0.9); color: var(--fg); }

/* animated inner boxes */
.modal{ 
  width:min(760px,94vw); background:var(--card); border-radius:12px; 
  padding:18px; box-shadow:0 30px 80px rgba(0,0,0,0.6); 
  display:flex; gap:16px; align-items:center;
  transform: translateY(var(--translate-normal)) scale(.98); opacity:0;
  transition: transform var(--duration-normal) var(--timing-snap),
              opacity var(--duration-normal) var(--timing-regular),
              box-shadow var(--duration-normal) var(--timing-regular);
}
.modal.open { transform: translateY(0) scale(1); opacity:1; }

.announceBox { 
  width:min(880px,94vw); max-height:80vh; overflow:auto; 
  background:var(--card); border-radius:12px; padding:18px; 
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
  transform: translateY(var(--translate-normal)) scale(.98); opacity:0;
  transition: transform var(--duration-normal) var(--timing-snap),
              opacity var(--duration-normal) var(--timing-regular),
              box-shadow var(--duration-normal) var(--timing-regular);
}
.announceBox.open { transform: translateY(0) scale(1); opacity:1; }

/* sizeWarning animation (also theme-aware) */
#sizeWarning {
  opacity:0;
  transform: translateY(calc(var(--translate-small) * 1.3)) scale(.99);
  transition: opacity var(--duration-fast) var(--timing-regular),
              transform var(--duration-normal) var(--timing-snap);
}
#sizeWarning.open { opacity:1; transform:none; }

.disc{width:160px;height:160px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%, var(--faint-2), transparent);box-shadow:inset 0 6px 18px rgba(0,0,0,0.4)}
.disc img{width:84%;height:84%;border-radius:50%;object-fit:cover;transform-origin:50% 50%}
.playerInfo{flex:1}
.playerTitle{font-size:18px;font-weight:700}
.playerSub{color:var(--muted);margin-top:6px}
.playerTime{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:8px}
.progressBar{width:100%;height:10px;border-radius:999px;background:var(--faint-2);overflow:hidden;cursor:pointer;margin-top:8px}
.progressBar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .08s linear}
.playerControls{display:flex;align-items:center;gap:10px;margin-top:12px}
.playerIcon{width:38px;height:38px;border-radius:8px;background:var(--icon-bg);display:inline-grid;place-items:center;cursor:pointer}

/* 播放器动画增强 */
.disc {
  transition: transform var(--duration-normal) var(--timing-bounce);
}
.disc:hover {
  transform: scale(1.05) rotate(5deg);
}

.playerIcon svg {
  transition: transform var(--duration-fast) var(--timing-bounce);
}
.playerIcon:hover svg {
  transform: scale(1.15);
}

.progressBar {
  transition: height var(--duration-fast) var(--timing-regular);
}
.progressBar:hover {
  height: 12px;
}

.announceFooter{display:flex;justify-content:flex-end;margin-top:12px}
.announceOk{
  padding:8px 12px;border-radius:8px;border:none;
  background:linear-gradient(90deg,var(--accent),#4c1d95);
  color:var(--btn-fg);cursor:pointer;
  transition: transform var(--duration-fast) var(--timing-bounce),
              opacity var(--duration-fast) var(--timing-regular);
}
.announceOk:hover {
  transform: translateY(calc(var(--translate-tiny) * -1));
}
.announceOk:active {
  transform: translateY(calc(var(--translate-tiny) * -0.3));
}
/* 统一错误状态样式 */
.error {
  border-color: #ff4444 !important;
  background: rgba(255,68,68,0.05) !important;
}
.error-text {
  color: #ff4444;
  font-size: 13px;
  margin-top: 4px;
}
.announceError {
  color: #ffb4b4;
  background: rgba(255,20,20,0.04);
  padding: 8px;
  border-radius: 8px;
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* 加载状态动画 */
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

.markdown-body{background:transparent;color:inherit;padding:0}
.footer{margin-top:14px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;align-items:center}
.logoPlaceholder{width:40px;height:40px;border-radius:8px;background:var(--icon-bg);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
/* support non-square logos: keep aspect ratio, fit inside the box */
.logoPlaceholder img, .logoPlaceholder svg {
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}

/* 统一下拉列表框和勾选框样式 */

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 12px;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 4px var(--accent);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  background: var(--card);
  position: relative;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '\2713';
  position: absolute;
  top: 0;
  left: 3px;
  color: var(--btn-fg-on-accent);
  font-size: 14px;
}
input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 2px var(--accent);
}

/* 美化滚动条 */
.list::-webkit-scrollbar,
.announceBox::-webkit-scrollbar,
#errorContent::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.list::-webkit-scrollbar-thumb,
.announceBox::-webkit-scrollbar-thumb,
#errorContent::-webkit-scrollbar-thumb {
  background: var(--faint);
  border-radius: 4px;
  transition: background var(--duration-fast) var(--timing-regular);
}
.list::-webkit-scrollbar-thumb:hover,
.announceBox::-webkit-scrollbar-thumb:hover,
#errorContent::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 20%, var(--faint));
}

/* 键盘焦点状态 */
.btn:focus-visible,
.iconBtn:focus-visible,
.playerIcon:focus-visible,
select:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* 空列表提示 */
#list:empty::after {
  content: '暂无文件';
  display: block;
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-style: italic;
  animation: fade-in var(--duration-normal) var(--timing-regular);
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 工具提示样式 */
[title]:not([title=""]) {
  position: relative;
}
[title]:not([title=""]):hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--card);
  color: var(--fg);
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 1000;
  animation: tooltip-appear 0.2s var(--timing-regular);
  margin-bottom: 6px;
}

@keyframes tooltip-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 按钮组样式 */
.btn-group {
  display: inline-flex;
  gap: 1px;
  border-radius: 8px;
  overflow: hidden;
}
.btn-group .btn {
  border-radius: 0;
  margin: 0;
}
.btn-group .btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.btn-group .btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* 响应式布局优化 */
@media (max-width:900px) {
  .row { grid-template-columns:64px 1fr 80px 80px 140px }
  .disc { width:120px;height:120px }
}

@media (max-width:600px) {
  .wrap { margin: 14px auto; padding: 12px; }
  .list { font-size: 14px; }
}