/* Extra styles for new wallet UI elements (appended to download.css) */

    .btn-wallet {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--accent-cyan);
      color: #000;
      font-family: var(--font-display);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      padding: 14px 32px;
      border-radius: var(--radius);
      border: none;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .btn-wallet:hover {
      background: #00eeff;
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(0,212,232,0.45);
    }
    .wallet-hint {
      margin-top: 10px;
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .wallet-connected-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }
    .wallet-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 6px rgba(34,197,94,0.6);
      flex-shrink: 0;
    }
    .wallet-address-text {
      font-family: monospace;
      font-size: 0.88rem;
      color: var(--text-primary);
    }
    .btn-disconnect {
      background: none;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-muted);
      font-size: 0.7rem;
      padding: 4px 10px;
      cursor: pointer;
      transition: color 0.2s, border-color 0.2s;
    }
    .btn-disconnect:hover {
      color: var(--accent-red, #e63946);
      border-color: var(--accent-red, #e63946);
    }
    .network-warn {
      background: rgba(245,200,66,0.08);
      border: 1px solid rgba(245,200,66,0.3);
      border-radius: var(--radius);
      padding: 12px 16px;
      font-size: 0.84rem;
      color: var(--accent-gold);
      margin-bottom: 16px;
    }
    .btn-pay {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: var(--accent-cyan);
      color: #000;
      font-family: var(--font-display);
      font-size: 0.78rem;
      font-weight: 900;
      letter-spacing: 0.1em;
      padding: 14px 36px;
      border-radius: var(--radius);
      border: none;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .btn-pay:hover:not(:disabled) {
      background: #00eeff;
      transform: translateY(-2px);
      box-shadow: 0 6px 28px rgba(0,212,232,0.45);
    }
    .btn-pay:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .error-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      background: rgba(230,57,70,0.08);
      border: 1px solid rgba(230,57,70,0.3);
      border-radius: var(--radius);
      padding: 16px 20px;
      font-size: 0.88rem;
      color: var(--text-muted);
    }
    .error-icon { font-size: 1.1rem; flex-shrink: 0; }
    .btn-retry {
      margin-left: auto;
      background: none;
      border: 1px solid var(--border);
      border-radius: 4px;
      color: var(--text-primary);
      font-size: 0.75rem;
      padding: 6px 14px;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-retry:hover {
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
    }