/* 基础样式与美观布局，尽量保持简洁现代 */
:root{
  --bg:#0f172a; /* slate-900 */
  --panel:#111827; /* gray-900 */
  --muted:#334155; /* slate-600 */
  --text:#e5e7eb; /* gray-200 */
  --primary:#22c55e; /* green-500 */
  --primary-700:#15803d;
  --border:#1f2937; /* gray-800 */
  --accent:#60a5fa; /* blue-400 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, #0b1220, #0f172a);
  color:var(--text);
  font:14px/1.6 system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, Noto Sans, Ubuntu, Cantarell, Helvetica, Arial;
}

.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:rgba(17,24,39,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--primary));color:#0b1220;font-weight:900}
.brand h1{margin:0;font-size:18px}
.env{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.env label{display:flex;flex-direction:column;font-size:12px;color:#cbd5e1}
.env input{height:34px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:#0b1220;color:var(--text);min-width:220px}

.container{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:rgba(17,24,39,.7);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.card.muted{color:#cbd5e1}
.input-row{display:flex;gap:12px}
.input-row input{flex:1;min-width:240px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0b1220;color:var(--text)}
.hint{color:#9ca3af;margin:8px 0 0}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.meta{display:grid;grid-template-columns:auto 1fr;gap:8px 12px}
.meta .k{color:#94a3b8}
.meta .v{color:#e2e8f0}

.qualities{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.quality-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,0.03);padding:8px 10px;border-radius:8px}
.quality-row .left{display:flex;gap:8px;align-items:center;flex:1 1 auto;min-width:160px}
.quality-row .actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}

/* 下载进度条 */
.progress{display:none;position:relative;width:180px;height:8px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.progress.show{display:inline-block}
.progress .bar{position:absolute;left:0;top:0;height:100%;width:0%;background:#28a745;transition:width .2s ease}
/* 不确定总大小时的动画 */
.progress.indeterminate .bar{width:40%;animation:indet 1.2s ease-in-out infinite;background:linear-gradient(90deg,#28a745,#78d694)}
@keyframes indet{0%{left:-40%}50%{left:60%}100%{left:100%}}
.btn{padding:6px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:#283041;color:#e9eef9;cursor:pointer}
.btn.ghost{background:transparent}
.btn.primary{background:#28a745;border-color:#28a745;color:#fff}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* 下载中的视觉反馈 */
.btn.loading{position:relative}
.btn.loading::after{content:'';width:14px;height:14px;border:2px solid rgba(255,255,255,.6);border-top-color:transparent;border-radius:50%;display:inline-block;margin-left:8px;vertical-align:-2px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 移除原始返回样式占位（如果存在） */
#raw{display:none}
.badge{padding:2px 8px;border-radius:999px;background:#0b1220;border:1px solid var(--border);color:#cbd5e1}
.btn{height:36px;padding:0 14px;border:none;border-radius:10px;background:#334155;color:#e5e7eb;cursor:pointer}
.btn.primary{background:linear-gradient(135deg,var(--primary),#10b981);color:#052e16}
.btn.primary:hover{filter:brightness(1.05)}
.btn.link{background:transparent;color:var(--accent);text-decoration:underline}

.player{width:100%;max-height:60vh;background:#0b1220;border:1px solid var(--border);border-radius:10px}

.loading{display:flex;align-items:center;gap:10px}
.spinner{width:18px;height:18px;border-radius:999px;border:2px solid #1f2937;border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 通用隐藏类，供 JS 切换显示状态 */
.hidden{display:none !important}

header .config.hidden { display: none; }
.code{overflow:auto;max-height:50vh;background:#0b1220;border-radius:8px;border:1px solid var(--border);padding:12px}
.app-footer{padding:16px 20px;border-top:1px solid var(--border);color:#9ca3af}
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 10px; align-items: center; }
.badge { padding: 2px 6px; font-size: 12px; border-radius: 6px; background: rgba(255,255,255,0.08); color: #cbd5e1; border: 1px solid rgba(255,255,255,0.12); }
.badge + .badge { margin-left: 0; }

/* 与进度条的间距/排版微调 */
.quality-row .actions { gap: 10px; }
.progress { margin-top: 8px; height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; display: none; width: 220px; }
.progress.show { display: block; }
.progress .bar { height: 100%; width: 0%; background: linear-gradient(90deg,#22c55e,#16a34a); transition: width .2s ease; }
.progress.indeterminate .bar { width: 30%; animation: indet 1s linear infinite; background: linear-gradient(90deg,#93c5fd,#60a5fa); }
@keyframes indet { 0%{ transform: translateX(-100%);} 100%{ transform: translateX(300%);} }