/* Page-scoped styles for es/download.html */
body {
      min-height: 100vh; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 48px 24px; text-align: center; position: relative; overflow: hidden;
    }

    .glow {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
      width: 500px; height: 500px;
      background: radial-gradient(ellipse, var(--lime-glow) 0%, transparent 70%);
      filter: blur(60px); pointer-events: none;
      animation: pulse 3s ease-in-out infinite alternate;
    }
    @keyframes pulse { from { opacity: 0.6; } to { opacity: 1; } }

    .label {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
      text-transform: uppercase; color: var(--lime); margin-bottom: 16px;
      position: relative;
    }

    h1 {
      font-family: var(--display); font-size: clamp(36px, 6vw, 56px);
      font-weight: 400; line-height: 1.1; margin: 0 0 16px;
      position: relative;
    }
    h1 em { font-style: italic; color: var(--lime); }

    .sub {
      font-family: var(--body); font-size: 15px; color: var(--muted);
      line-height: 1.6; max-width: 440px; margin: 0 auto 40px;
      position: relative;
    }

    /* Key input card */
    .key-card {
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 12px; padding: 32px; max-width: 460px; width: 100%;
      position: relative; margin: 0 auto 32px;
    }
    .key-card-label {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
      text-align: left;
    }
    .key-input-wrap {
      display: flex; gap: 10px;
    }
    .key-input {
      flex: 1; background: rgba(0,0,0,0.4); border: 1px solid var(--border);
      border-radius: 6px; padding: 14px 16px;
      font-family: var(--mono); font-size: 16px; letter-spacing: 0.1em;
      color: var(--white); outline: none; transition: border-color 0.2s;
    }
    .key-input::placeholder { color: rgba(255,255,255,0.2); letter-spacing: 0.08em; }
    .key-input:focus { border-color: var(--lime); }
    /* Used on both <button> and <a> elements. Anchor defaults (underline,
       inline display, blue color) had to be neutralized so the CTA reads
       as a button instead of a struck-through link. */
    .key-btn {
      display: inline-block; text-align: center;
      background: var(--lime); color: #0a0a0a; border: none;
      border-radius: 6px; padding: 14px 24px;
      font-family: var(--mono); font-size: 12px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      cursor: pointer; transition: opacity 0.2s; white-space: nowrap;
      text-decoration: none;
    }
    .key-btn:hover, .key-btn:focus, .key-btn:visited, .key-btn:active {
      color: #0a0a0a; text-decoration: none;
    }
    .key-btn:hover { opacity: 0.85; }
    .key-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    .key-error {
      font-family: var(--body); font-size: 13px; color: #ff6b6b;
      margin-top: 12px; text-align: left; display: none;
    }
    .key-error.visible { display: block; }

    /* Download panel (hidden until key validated) */
    .download-panel {
      display: none; max-width: 460px; width: 100%; position: relative;
      margin: 0 auto;
    }
    .download-panel.visible { display: block; }

    .download-success {
      font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em;
      text-transform: uppercase; color: var(--lime); margin-bottom: 24px;
    }

    .dl-buttons {
      display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
      margin-bottom: 32px;
    }
    .dl-btn {
      display: flex; align-items: center; gap: 10px;
      background: rgba(255,255,255,0.03); border: 1px solid var(--border);
      border-radius: 8px; padding: 18px 28px;
      text-decoration: none; color: var(--white);
      transition: border-color 0.2s, background 0.2s;
      min-width: 180px; justify-content: center;
    }
    .dl-btn:hover { border-color: var(--lime); background: rgba(191,255,94,0.04); }
    .dl-btn-disabled {
      opacity: 0.35; cursor: default; pointer-events: none;
    }
    .dl-icon { font-size: 22px; }
    .dl-label { text-align: left; }
    .dl-label-os {
      font-family: var(--body); font-size: 14px; font-weight: 500;
    }
    .dl-label-file {
      font-family: var(--mono); font-size: 11px; color: var(--muted);
    }

    .dl-note {
      font-family: var(--body); font-size: 13px; color: var(--muted);
      line-height: 1.6;
    }
    .dl-note code {
      font-family: var(--mono); font-size: 12px;
      background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 3px;
    }

    .footer-note {
      font-family: var(--body); font-size: 13px; color: var(--muted);
      margin-top: 40px; position: relative;
    }
    .footer-note a { color: var(--lime); text-decoration: none; }
    .footer-note a:hover { text-decoration: underline; }

    @media (max-width: 500px) {
      .key-input-wrap { flex-direction: column; }
      .dl-buttons { flex-direction: column; align-items: stretch; }
    }