/* Download page styles – lightweight, leveraging base.css */
:root {
  --dl-accent: #00e0ff;
  --dl-accent-2: #ff0df2;
  --dl-surface: rgba(255,255,255,0.04);
  --dl-surface-2: rgba(255,255,255,0.06);
  --dl-text-dim: rgba(255,255,255,0.78);
}

.dl-main { display: block; }

/* Hero */
.dl-hero { position: relative; overflow: clip; }
.dl-hero__media { position: relative; max-height: 48rem; }
.dl-hero__media img { width: 100%; height: auto; display: block; object-fit: cover; filter: saturate(1.1) contrast(1.05) brightness(0.9); }
.dl-hero__inner { position: relative; margin-inline: auto; padding: clamp(1.25rem, 2vw + 1rem, 2rem); max-width: 1200px; transform: translateY(-8%); background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.2)); border-radius: 0.75rem; backdrop-filter: blur(3px); }
.dl-hero h1 { font-size: clamp(1.8rem, 1.1rem + 2vw, 3rem); letter-spacing: 0.02em; }
.dl-hero__tag { color: var(--dl-text-dim); margin-top: 0.5rem; }
.dl-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.dl-hero__note { font-size: 0.95rem; color: var(--dl-text-dim); margin-top: 0.75rem; }

/* Buttons */
.dl-btn { -webkit-font-smoothing: antialiased; appearance: none; border: 1px solid transparent; color: #fff; background: var(--dl-surface); padding: 0.7rem 1rem; border-radius: 0.6rem; cursor: pointer; transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.dl-btn:hover { transform: translateY(-1px); background: var(--dl-surface-2); border-color: rgba(255,255,255,0.2); box-shadow: 0 0 0.5rem rgba(0,224,255,0.2); }
.dl-btn:focus-visible { outline: 2px solid var(--dl-accent); outline-offset: 2px; }
.dl-btn--primary { background: linear-gradient(90deg, var(--dl-accent), var(--dl-accent-2)); border: none; }
.dl-btn--primary:hover { filter: brightness(1.05); box-shadow: 0 0 0.75rem rgba(0,224,255,0.35); }
.dl-btn--ghost { background: var(--dl-surface); border: 1px solid rgba(255,255,255,0.18); }
.dl-btn--danger { background: rgba(255, 71, 87, 0.15); border: 1px solid rgba(255, 71, 87, 0.4); }

/* Sections */
.section { padding: clamp(2rem, 3vw + 1rem, 4rem) 1rem; max-width: 1200px; margin-inline: auto; }
.section__header { margin-bottom: 1rem; }
.section__header h2 { font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); }

/* Cards and lists */
.dl-card { background: var(--dl-surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 1rem; }
.dl-list { margin: 0.5rem 0 0 1rem; line-height: 1.6; }
.dl-note { color: var(--dl-text-dim); font-size: 0.95rem; }
.dl-link { color: var(--dl-accent); text-decoration: underline; text-decoration-thickness: 1px; }

/* Platforms */
.dl-platforms__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dl-figure { margin-top: 1rem; text-align: center; }
.dl-figure img { width: 100%; height: auto; border-radius: 0.5rem; }
.dl-figure figcaption { margin-top: 0.5rem; color: var(--dl-text-dim); font-size: 0.95rem; }

/* Install */
.dl-install__grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.dl-acc { background: var(--dl-surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
.dl-acc > summary { cursor: pointer; font-weight: 600; }
.dl-acc > summary::-webkit-details-marker { display: none; }
.dl-steps { margin: 0.5rem 0 0 1rem; }

/* Specs */
.dl-specs__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dl-kv { list-style: none; padding: 0; margin: 0.5rem 0; }
.dl-kv li { display: grid; grid-template-columns: 8ch 1fr; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px dashed rgba(255,255,255,0.08); }
.dl-kv li span:first-child { color: var(--dl-text-dim); }

/* Extras */
.dl-extras__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* DLC */
.dl-dlc__content { display: grid; gap: 0.5rem; }

/* Manager */
.dl-manager__toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.dl-manager__list { background: var(--dl-surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 0.75rem; min-height: 4rem; }
.dl-placeholder { color: var(--dl-text-dim); }
.dl-task { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 0.6rem; padding: 0.65rem 0.75rem; margin-bottom: 0.5rem; }
.dl-task__title { font-weight: 600; }
.dl-task__meta { color: var(--dl-text-dim); font-size: 0.9rem; }
.dl-task__bar { grid-column: 1 / -1; height: 8px; background: rgba(255,255,255,0.07); border-radius: 999px; overflow: hidden; }
.dl-task__bar > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--dl-accent), var(--dl-accent-2)); transition: width .2s linear; }
.dl-task__actions { display: flex; gap: 0.4rem; }
.dl-task__actions .dl-btn { padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.dl-task--done { opacity: 0.85; }

/* Updates */
.dl-updates__list { display: grid; gap: 1rem; }
.dl-update { background: var(--dl-surface); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.6rem; padding: 0.75rem; }
.dl-update__meta { color: var(--dl-text-dim); font-size: 0.9rem; }

/* Responsive tweaks */
@media (min-width: 900px) {
  .dl-hero__inner { padding: 2rem; }
}