/* ============================================
   软著申请管理系统 — 全局样式（Premium Edition）
   ============================================ */

/* --- Base --- */
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #a5b4fc; }
textarea { resize: vertical; }

/* --- Sidebar (desktop fallback) --- */
.sidebar-item.active { background: #eef2ff; color: #4f46e5; border-right: 3px solid #4f46e5; }
.sidebar-item:hover:not(.active) { background: #f9fafb; }

/* --- Status badges --- */
.status-pending    { background: #fef9c3; color: #a16207; border: 1px solid #fde68a; }
.status-generating { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.status-completed  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.status-failed     { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: .2px; }

/* --- Step cards --- */
.step-done    { border-color: #86efac; background: linear-gradient(135deg,#f0fdf4,#dcfce7); }
.step-done    .step-icon { background: linear-gradient(135deg,#22c55e,#16a34a); color: white; box-shadow: 0 2px 6px rgba(22,163,74,.3); }
.step-running { border-color: #a5b4fc; background: linear-gradient(135deg,#eef2ff,#e0e7ff); }
.step-running .step-icon { background: linear-gradient(135deg,#6366f1,#4f46e5); color: white; box-shadow: 0 2px 6px rgba(79,70,229,.3); }
.step-failed  { border-color: #fca5a5; background: linear-gradient(135deg,#fef2f2,#fee2e2); }
.step-failed  .step-icon { background: linear-gradient(135deg,#ef4444,#dc2626); color: white; box-shadow: 0 2px 6px rgba(220,38,38,.3); }
.step-pending .step-icon { background: #e5e7eb; color: #9ca3af; }

/* --- Task card --- */
.task-card {
  transition: all .25s cubic-bezier(.4,0,.2,1); cursor: pointer;
  border: 1px solid #e5e7eb; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.task-card:hover {
  box-shadow: 0 8px 25px rgba(99,102,241,.12), 0 2px 8px rgba(0,0,0,.04);
  transform: translateY(-3px);
  border-color: #c7d2fe;
}
.task-card:active { transform: translateY(-1px); }

/* --- Device type colors --- */
.device-app      { background: linear-gradient(135deg,#fef9c3,#fef3c7); color: #a16207; border: 1px solid #fde68a; }
.device-pc       { background: linear-gradient(135deg,#e0e7ff,#dbeafe); color: #3730a3; border: 1px solid #c7d2fe; }
.device-web      { background: linear-gradient(135deg,#dcfce7,#d1fae5); color: #166534; border: 1px solid #bbf7d0; }
.device-mini     { background: linear-gradient(135deg,#ede9fe,#e9d5ff); color: #6b21a8; border: 1px solid #d8b4fe; }
.device-server   { background: linear-gradient(135deg,#f1f5f9,#e2e8f0); color: #334155; border: 1px solid #cbd5e1; }
.device-embedded { background: linear-gradient(135deg,#fce7f3,#fbcfe8); color: #9d174d; border: 1px solid #f9a8d4; }

/* --- Stat cards --- */
.stat-card {
  transition: all .25s cubic-bezier(.4,0,.2,1);
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.stat-card.active { box-shadow: 0 0 0 2px #6366f1, 0 4px 12px rgba(99,102,241,.15); border-color: #6366f1; }

/* --- Language checkboxes (2026-04 评估报告改造：26 项 + 副标题 + 推荐高亮) --- */
.lang-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lang-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 8px; border: 1px solid #e5e7eb; border-radius: 10px;
  font-size: 12px; cursor: pointer; transition: all .2s; user-select: none;
  background: #fff; text-align: center; line-height: 1.25; min-height: 42px;
}
.lang-chip:hover { border-color: #a5b4fc; background: #eef2ff; }
.lang-chip.selected { border-color: #6366f1; background: #eef2ff; color: #4338ca; font-weight: 600; box-shadow: 0 0 0 1px #6366f1; }
.lang-chip input { display: none; }
.lang-chip-name { font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.lang-chip-note {
  font-size: 10px; color: #94a3b8; font-weight: 400; line-height: 1.15;
  margin-top: 1px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lang-chip.selected .lang-chip-note { color: #6366f1; }
/* 推荐：根据所选设备类型，与该设备最匹配的语言显示一个柔和外圈 */
.lang-chip.recommended:not(.selected) { border-color: #fbbf24; background: linear-gradient(135deg,#fffbeb,#fef9c3); }
.lang-chip.recommended:not(.selected):hover { border-color: #f59e0b; background: linear-gradient(135deg,#fef3c7,#fde68a); }
.lang-chip.recommended.selected { box-shadow: 0 0 0 1px #6366f1, 0 0 0 3px #fde68a; }
/* 类别小徽章（"框架" / "标记"）—— 仅在非选中态 + hover 时露出，避免干扰 */
.lang-chip-cat {
  font-size: 9px; padding: 1px 5px; border-radius: 999px; font-weight: 500;
  background: #ede9fe; color: #6d28d9; line-height: 1.4; vertical-align: middle;
}
.lang-chip-cat-mu { background: #dbeafe; color: #1d4ed8; }
.lang-chip.cat-framework { background: linear-gradient(180deg,#fff,#faf5ff); }
.lang-chip.cat-framework.selected { background: linear-gradient(180deg,#eef2ff,#ede9fe); }

/* --- Progress bar --- */
.progress-bar-inner { transition: width .8s cubic-bezier(.4,0,.2,1); border-radius: 9999px; }

/* --- Animations --- */
@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
.animate-pulse { animation: pulse 2s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.fade-in { animation: fadeIn .3s cubic-bezier(.4,0,.2,1); }
@keyframes modalIn { from { opacity:0; transform:scale(.92) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
.animate-modal-in { animation: modalIn .25s cubic-bezier(.4,0,.2,1); }
@keyframes shimmer { 0%{background-position:200% 0} to{background-position:-200% 0} }

/* --- Filter pills --- */
.filter-pill {
  padding: 5px 16px; border-radius: 9999px; font-size: 12px; cursor: pointer;
  border: 1px solid #e5e7eb; transition: all .2s; font-weight: 500; background: #fff;
}
.filter-pill:hover { border-color: #a5b4fc; background: #eef2ff; color: #4338ca; }
.filter-pill.active { background: linear-gradient(135deg,#4f46e5,#6366f1); color: white; border-color: transparent; box-shadow: 0 2px 8px rgba(79,70,229,.25); }

/* --- Download button --- */
.btn-download {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; background: linear-gradient(135deg,#059669,#10b981);
  color: white; border-radius: 12px; font-size: 13px; font-weight: 600;
  transition: all .2s; box-shadow: 0 2px 8px rgba(5,150,105,.25);
}
.btn-download:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,.35); }
.btn-download:active { transform: translateY(0); }

/* --- Utility --- */
.glass { background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }