/* Task 20: design declarations scoped to the APP page. */
.reskin-app20 .crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 16px 0 4px; font-size: 13px; color: var(--text-faint);
  position: relative; z-index: 1;
}
.reskin-app20 .crumbs a { color: var(--text-dim); transition: color .18s var(--ease); }
.reskin-app20 .crumbs a:hover { color: var(--brand-soft); }
.reskin-app20 .crumbs svg { opacity: .45; flex-shrink: 0; }
.reskin-app20 .crumbs [aria-current] { color: var(--text); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reskin-app20 .app-hero {
  position: relative; z-index: 1; display: grid; gap: clamp(20px, 4vw, 48px); align-items: center;
  margin: 8px 0 clamp(26px, 4vw, 44px); padding: clamp(22px, 4vw, 48px);
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    radial-gradient(70% 90% at 90% 10%, rgba(30, 160, 248, .22), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(56, 208, 255, .12), transparent 60%),
    var(--surface);
}
@media (min-width: 860px) { .reskin-app20 .app-hero { grid-template-columns: 1.3fr 1fr; } }
.reskin-app20 .app-hero__icon {
  display: inline-grid; place-items: center; padding: 10px 14px; border-radius: 18px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-strong);
}
.reskin-app20 .app-hero__icon .logo__img { height: 30px; }
.reskin-app20 .app-hero h1 { margin: 16px 0 6px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.reskin-app20 .app-hero__tagline { margin: 0 0 10px; color: var(--text-dim); font-size: clamp(14px, 1.4vw, 17px); }
.reskin-app20 .app-hero__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 22px; color: var(--text-faint); font-size: 13px; }
.reskin-app20 .app-hero__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.reskin-app20 .app-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.reskin-app20 .app-dl {
  display: inline-flex; align-items: center; gap: 10px; min-width: 176px;
  padding: 11px 20px 11px 16px; border-radius: 14px; font-size: 16px; font-weight: 700; color: #fff;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.reskin-app20 .app-dl:hover { transform: translateY(-2px); }
.reskin-app20 .app-dl svg { width: 26px; height: 26px; flex: none; color: inherit; }
.reskin-app20 .app-dl span { display: flex; flex-direction: column; line-height: 1.25; }
.reskin-app20 .app-dl small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.reskin-app20 .app-dl--android { background: linear-gradient(135deg, var(--brand), #38d0ff); box-shadow: 0 12px 28px -10px var(--brand-glow); }
.reskin-app20 .app-dl--ios { background: #f4f4f6; color: #14141a; }
.reskin-app20 .app-hero__note { margin: 16px 0 0; color: var(--text-faint); font-size: 12.5px; }

.reskin-app20 .app-hero__phone { display: none; justify-content: center; }
@media (min-width: 860px) { .reskin-app20 .app-hero__phone { display: flex; } }
.reskin-app20 .app-phone {
  position: relative; width: 210px; aspect-ratio: 9 / 18.5; border-radius: 34px; padding: 44px 16px 16px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  background: linear-gradient(160deg, #1b2533, #0e1219); border: 6px solid #242b36;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
}
.reskin-app20 .app-phone__notch { position: absolute; top: 10px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #05070a; }
.reskin-app20 .app-phone .logo__img { height: 22px; margin-bottom: 6px; }
.reskin-app20 .app-phone i {
  display: block; width: 100%; flex: 1; border-radius: 10px;
  background: linear-gradient(135deg, rgba(30, 160, 248, .35), rgba(56, 208, 255, .08));
}
.reskin-app20 .app-phone i:nth-of-type(2) { background: linear-gradient(135deg, rgba(255, 176, 58, .3), rgba(255, 122, 61, .08)); }
.reskin-app20 .app-phone i:nth-of-type(3) { background: linear-gradient(135deg, rgba(160, 90, 255, .3), rgba(30, 160, 248, .08)); }

.reskin-app20 .app-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); position: relative; z-index: 1; }
.reskin-app20 .app-feats li { padding: 18px 18px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.reskin-app20 .app-feats h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: var(--brand-soft); }
.reskin-app20 .app-feats p { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.65; }
.reskin-app20 .app-tips { margin: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.reskin-app20 .app-tips div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.reskin-app20 .app-tips dt { font-weight: 700; }
.reskin-app20 .app-tips dd { margin: 0; color: var(--text-dim); font-size: 13.5px; }
@media (max-width: 519px) { .reskin-app20 .app-tips div { grid-template-columns: 1fr; gap: 4px; } }

.reskin-app20 .inner-links { margin: clamp(30px, 4vw, 48px) 0 clamp(24px, 3vw, 36px); position: relative; z-index: 1; }

.reskin-app20 .inner-links__grid {
  display: grid; gap: var(--gap);
  /* auto-fit + 170px 下限：卡片数量在 5~6 之间变（当前页自己那条会被去掉），宽屏一行排满；
     auto-fill 会留下空轨道，auto-fit 则让空轨道塌陷，剩下几张就铺满几张 */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.reskin-app20 .inner-links__card {
  display: block; height: 100%;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.reskin-app20 .inner-links__card:hover {
  background: var(--surface-2); border-color: rgba(30, 160, 248, .45);
  transform: translateY(-2px);
}

.reskin-app20 .inner-links__card h3 {
  margin: 0 0 8px; font-size: 15.5px; font-weight: 700;
  display: flex; align-items: center; gap: 5px;
  transition: color .2s var(--ease);
}
.reskin-app20 .inner-links__card:hover h3 { color: var(--brand-soft); }
.reskin-app20 .inner-links__card h3 svg { opacity: .55; transition: transform .2s var(--ease); }
.reskin-app20 .inner-links__card:hover h3 svg { transform: translateX(3px); opacity: 1; }

.reskin-app20 .inner-links__card p {
  margin: 0; color: var(--text-faint); font-size: 13.5px; line-height: 1.7;
}


.reskin-app20 { min-width: 0; overflow-wrap: anywhere; }
.reskin-app20 .app-hero__info { min-width: 0; }
.reskin-app20 .app-hero__meta { flex-wrap: wrap; }
.reskin-app20 .app-hero__icon img, .reskin-app20 .app-phone img { width: auto; object-fit: contain; }
.reskin-app20 .app-dl { border: 0; text-align: left; }
.reskin-app20 .app-dl:disabled { cursor: not-allowed; opacity: .6; }
.reskin-app20 .app-dl:disabled:hover { transform: none; }
.reskin-app20 .app-dl:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 4px; }
.reskin-app20 .app-download-status { margin: 10px 0 0; color: var(--text-dim); font-size: 13px; }
.reskin-app20 .inner-links__card[aria-disabled="true"] { cursor: not-allowed; }
.reskin-app20 .inner-links__card[aria-disabled="true"]:hover { transform: none; background: var(--surface); border-color: var(--line); }
@media (max-width: 359px) { .reskin-app20 .app-feats { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .reskin-app20 .app-dl, .reskin-app20 .inner-links__card { transition: none; } }