/* ==========================================================================
   机器人APP下载 内页骨架：下载站列表 · 左筛选栏 + 右下载列表 + 详情折叠
   ========================================================================== */

:root {
  --ds-bg: #f3fbf7;
  --ds-deep: #03251c;
  --ds-green: #059669;
  --ds-mint: #34d399;
  --ds-ink: #052e22;
  --ds-muted: #4f7568;
  --ds-line: #d3ebe0;
}

body.ds-page { background: var(--ds-bg); color: var(--ds-ink); }

.ds-page .brand-mark { background: linear-gradient(140deg, #6ee7b7, #059669); color: #032019; box-shadow: 0 6px 16px rgba(5, 150, 105, .26); }
.ds-page .brand-text em { color: var(--ds-green); }
.ds-page .site-nav a.is-active { color: var(--ds-green); background: rgba(5, 150, 105, .09); }
.ds-page .btn-login { background: linear-gradient(135deg, #34d399, #059669); color: #032019; box-shadow: 0 8px 20px rgba(5, 150, 105, .26); }

/* ---------------- Hero ---------------- */
.ds-hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 84px;
  color: #e6faf2;
  background:
    radial-gradient(680px 420px at 80% 12%, rgba(16, 185, 129, .26), transparent 66%),
    linear-gradient(150deg, var(--ds-deep), #064e3b);
}

.ds-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 46px;
  align-items: center;
}

.ds-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, .4);
  background: rgba(52, 211, 153, .08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #6ee7b7;
}

.ds-hero h1 {
  margin: 22px 0 16px;
  font-size: clamp(29px, 3.9vw, 44px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.5px;
  color: #fff;
  text-wrap: balance;
}

.ds-hero h1 em { font-style: normal; color: #6ee7b7; }

.ds-hero .lead {
  font-size: 15.5px;
  line-height: 1.95;
  color: #a7cfc2;
  max-width: 520px;
}

.ds-hero .lead strong { color: #fff; }

.ds-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }

.ds-actions .btn-primary {
  background: linear-gradient(135deg, #6ee7b7, #059669);
  color: #032019;
  box-shadow: 0 16px 34px rgba(16, 185, 129, .28);
}

.ds-actions .btn-room {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.ds-actions .btn-room b { color: #6ee7b7; letter-spacing: 2px; }

.ds-visual img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

/* ---------------- 主体：左筛选 + 右列表 ---------------- */
.ds-body { padding: 70px 0 88px; }

.ds-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
  align-items: start;
}

.ds-filter {
  position: sticky;
  top: 94px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--ds-line);
  background: #fff;
  box-shadow: var(--shadow-s);
}

.ds-filter h2 {
  font-size: 12px;
  letter-spacing: 2px;
  color: #8aa99e;
  margin-bottom: 14px;
}

.ds-filter .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ds-ink);
  transition: background .2s;
}

.ds-filter .opt:hover { background: #effbf5; }
.ds-filter .opt.current { background: #e6f9f0; font-weight: 700; color: var(--ds-green); }
.ds-filter .opt small { font-size: 12px; color: #8aa99e; }

.ds-filter .divider { height: 1px; background: var(--ds-line); margin: 14px 0; }

.ds-filter .tip {
  font-size: 12.5px;
  line-height: 1.8;
  color: #6d8c81;
}

.ds-filter .tip a { color: var(--ds-green); font-weight: 700; }

/* 下载列表 */
.ds-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.ds-list-head h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; }
.ds-list-head span { font-size: 13px; color: var(--ds-muted); }

.dl-list { display: grid; gap: 12px; }

.dl-row {
  display: grid;
  grid-template-columns: 60px 1fr 190px;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--ds-line);
  background: #fff;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}

.dl-row:hover {
  border-color: #9ed9c4;
  box-shadow: 0 18px 40px rgba(3, 37, 28, .09);
  transform: translateY(-2px);
}

.dl-row .os {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: #e9f9f1;
  font-size: 24px;
}

.dl-row h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 4px; }
.dl-row h3 .v {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e6f9f0;
  color: var(--ds-green);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.dl-row p { font-size: 13.5px; color: var(--ds-muted); line-height: 1.7; }

.dl-row .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dl-row .meta span {
  padding: 3px 9px;
  border-radius: 4px;
  background: #f2faf6;
  font-size: 11.5px;
  color: #6d8c81;
}

.dl-row .act { display: grid; gap: 8px; justify-items: stretch; }

.dl-row .act a {
  padding: 11px 16px;
  border-radius: 9px;
  background: var(--ds-green);
  color: #fff;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  transition: background .2s;
}

.dl-row .act a:hover { background: #047857; }

.dl-row .act .alt {
  background: #fff;
  border: 1px solid var(--ds-line);
  color: var(--ds-green);
}

.dl-row .act .alt:hover { background: #effbf5; }

/* ---------------- 详情折叠 ---------------- */
.ds-faq-section { padding: 0 0 88px; }

.ds-faq-title { margin-bottom: 24px; }
.ds-faq-title h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; margin-bottom: 6px; }
.ds-faq-title p { font-size: 14px; color: var(--ds-muted); }

.acc-list { display: grid; gap: 10px; }

.acc-item {
  border: 1px solid var(--ds-line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s;
}

.acc-item.is-open { border-color: #9ed9c4; }

.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ds-ink);
}

.acc-trigger .sign {
  flex: none;
  margin-left: auto;
  width: 22px; height: 22px;
  position: relative;
  border-radius: 6px;
  background: #e9f9f1;
}

.acc-trigger .sign::before,
.acc-trigger .sign::after {
  content: "";
  position: absolute;
  inset: 50% 26%;
  height: 2px;
  margin-top: -1px;
  background: var(--ds-green);
  transition: transform .25s;
}

.acc-trigger .sign::after { transform: rotate(90deg); }
.acc-item.is-open .acc-trigger .sign::after { transform: rotate(0); }

.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 22px 20px; font-size: 13.5px; line-height: 1.9; color: var(--ds-muted); }
.acc-panel a { color: var(--ds-green); font-weight: 600; }

/* 相关 */
.ds-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.ds-related a {
  padding: 22px;
  border-radius: 12px;
  border: 1px solid var(--ds-line);
  background: #fff;
  transition: border-color .2s, transform .2s;
}

.ds-related a:hover { border-color: #9ed9c4; transform: translateY(-3px); }
.ds-related strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.ds-related span { font-size: 12.5px; color: var(--ds-muted); }

/* 入场 */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1000px) {
  .ds-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .ds-layout { grid-template-columns: 1fr; }
  .ds-filter { position: static; }
  .ds-filter nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .ds-filter .opt { padding: 7px 12px; border-radius: 999px; background: #f2faf6; }
  .ds-filter .divider, .ds-filter .tip { display: none; }
  .ds-related { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .ds-hero { padding: 50px 0 60px; }
  .ds-hero h1 { font-size: 29px; }
  .ds-actions .btn { width: 100%; }
  .ds-body { padding: 48px 0 62px; }
  .dl-row { grid-template-columns: 46px 1fr; gap: 14px; padding: 18px; }
  .dl-row .os { width: 44px; height: 44px; font-size: 20px; }
  .dl-row .act { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; display: grid; }
  .ds-faq-section { padding-bottom: 62px; }
}